Putting random full screen images in a Div in IE 11 with JavaScript

[Danl0013]

My agency is transitioning from I.E. 8 to I.E. 11 in the near future. The main page of our website features four random full-screen background images that automatically change on the first of each month. (I received some excellent assistance from this forum getting the syntax of the style filter in that code to function correctly so many thanks for that.)

The following JavaScript and CSS code works very well in I.E. 8 but will not work in I.E. 11. I have made a number of attempts to modify the code using CSS3 background-size properties "cover" or "contain" but have had no luck getting the images to display in I.E. 11 so there is clearly something I am missing. My initial question is, can this code be tweaked to work in I.E. 11 or should I scrap this approach and go with something different? My secondary question is, if this approach can work, are there any suggestions on how it can be tweaked? Thanks

NOTE: The code only reflects one month. There are additional "else if" sections for each month but the code is identical.

var year = new Date();
var month = year.getMonth(); 

if(month == 0)
{
var imgCount = 4;
        var dir = 'images/background_photos/01_Jan_Full/';
        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')";
}

Style for the container Div

#container    
{
position: fixed; 
margin: 0;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
}

[Beverleyh]

Untested, but try replacing;

document.getElementById("container").style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + dir + images[randomCount] + "', sizingMethod='scale')";

with

document.getElementById("container").style.backgroundImage = "url('" + dir + images[randomCount] + "')";

and then add background-size:cover; to the CSS

[styxlawyer]

My agency is transitioning from I.E. 8 to I.E. 11 in the near future.
.
.

... however, the rest of the world may not be, so you need to cater for those people as well as the large proportion of the world's population who steer clear of anything to do with Mickey$0ft,

[Beverleyh]

document.getElementById("container").style.backgroundImage = "url('" + dir + images[randomCount] + "')";

with background-size:cover; in the CSS will suit IE9+ and all other modern browsers.

Current browser usage for IE8 and less is 2.13% and falling (http://www.sitepoint.com/browser-tre...refoxs-future/) so its probably OK to drop support for those older browsers altogether. Check your website usage though (Google Analytics or whatever web stats tool you use) - you may have more users, or you may have less, so its up to you to decide how worthwhile it is (and how much extra dev effort you want to put in). If the background image is just for decoration, I would personally discontinue support for it in IE8 now - as long as your users can still read the critical content, that's the main thing.

If you need further help, please post a link to your page.