Danl0013
12-10-2015, 11:45 PM
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%;
}
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%;
}