Putting a random image in a Div with JavaScript

**Danl0013** · 12-02-2014, 08:08 PM

The code below posts a random background image to a Div with the ID "container". I am trying to change that code so that the image posts as a regular in-line image and am struggling with the syntax. Is there a way to modify this code to do that or am I barking up the wrong tree? My ultimate objective is to put a random image in the Div that resizes to fit the browser window. My understanding is that can be done with CSS with an image. Unfortunately, the intranet that hosts the site I am working on is I.E. 8 only so I cannot take advantage of the nifty "cover" langauge in CSS 3 which would allow me to do it with a background image.

var imgCount = 4;
var dir = 'images/background_photos/11_Nov/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "image1.jpg",
images[2] = "image2.jpg",
images[3] = "image3.jpg",
images[4] = "image4.jpg",
document.getElementById("container").style.backgroundImage = "url(" + dir + images[randomCount] + ")";

**jscheuer1** · 12-03-2014, 02:10 AM

You could use IE 8's proprietary filter alpha image loader (different than the simpler alpha opacity filter used for fading in/out prior to IE's adoption (in v 9) of the standard css opacity property). The alpha image loader will take an image and apply it to a div as a sort of background image (but not as the background image in css, in fact the div must have no background for this to work), and with other differences - as properties of the filter, you can choose a src and sizing method, one of the later is scale, which (if the div takes up all of the window) should work out. Other differences include a requirement that the div have 'layout' (this is a slightly different concept than standard HTML layout and is defined by MS in several places. Generally, defining both height and width in css will do it. There are other methods of establishing this special kind of 'layout' if that's inconvenient, or insufficient (as it sometimes can be). And since it's a filter, you will need to use the proprietary filter syntax in the correct manner for it to work. For more info on the filter (including it's use in css and scripting) see:

http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

If I get a chance I'll play around with this and see if I can come up with more specifics.

**jscheuer1** · 12-03-2014, 02:43 AM

OK, in IE 8, this should work out quite nicely:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
	margin: 0;
	height: 100%;
}
#container {
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var imgCount = 4;
        var dir = 'images/background_photos/11_Nov/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array
                images[1] = "image1.jpg", 
                images[2] = "image2.jpg", 
                images[3] = "image3.jpg", 
		images[4] = "image4.jpg", 
document.getElementById("container").style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + dir + images[randomCount] + "', sizingMethod='scale')";
</script>
</body>
</html>

**Danl0013** · 12-03-2014, 09:58 PM

That solution worked perfectly. It allows the Div to be placed anywhere on the page and have any size (as long as both height and width are defined). It also scaled up nicely as a full-screen random background image. I found numerous workarounds for this scaling problem in I.E. 8 but this is the only one that worked with random images. Thanks!