Member Avatar for Ritesh_4

Hello, I have used the css background-size: cover, where it works well on Firefox and IE9, however, on IE8 it is not using this css at all, anyone can help me find a way to make it compatible on IE8 (and previous versions if possible) as well?

  • 3 Contributors
  • 4 Replies
  • 182 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by Ritesh_4

Dani AI

Generated

background-size: cover is not supported in IE8 and earlier. ’s CSS-Tricks pointers are a good start, and ’s AlphaImageLoader idea and ’s script show common directions. AlphaImageLoader can work, but it is fragile (performance, PNG/alpha issues, no true background-position support) and tends to complicate dynamic server-side image workflows. A simpler, more predictable fallback for PHP-generated backgrounds is to output an IE-only absolutely positioned <img> and scale/center it with a tiny IE-compatible script — this keeps the image element semantics, avoids filters, and plays nicely with dynamic src values.

Example (IE < 9 only markup; server-side PHP provides the URL):

<!--[if lt IE 9]>
<div id="ie-bg-wrap">
<img id="ie-bg-img" src="<?php echo htmlspecialchars($bgUrl, ENT_QUOTES, 'UTF-8'); ?>" alt="">
</div>
<![endif]-->

Minimal CSS to hold the image behind content:

#ie-bg-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
#ie-bg-img { position: absolute; top: 0; left: 0; display: block; max-width: none; }

IE8-compatible cover script (measures the real image size, scales to cover, then centers):

(function(){
var img = document.getElementById('ie-bg-img');
if (!img) return;
function cover(){
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
var tmp = new Image();
tmp.onload = function(){
var iw = tmp.width, ih = tmp.height, ir = iw/ih, wr = w/h;
if (ir > wr) {
img.style.height = h + 'px';
img.style.width = 'auto';
} else {
img.style.width = w + 'px';
img.style.height = 'auto';
}
img.style.left = Math.round((w - img.offsetWidth)/2) + 'px';
img.style.top = Math.round((h - img.offsetHeight)/2) + 'px';
};
tmp.src = img.src;
}
cover();
if (window.addEventListener) window.addEventListener('resize', cover, false);
else if (window.attachEvent) window.attachEvent('onresize', cover);
})();

Notes and troubleshooting: use conditional comments so modern browsers keep the CSS background; ensure the wrapper z-index sits behind page content; if server-side control is available, pre-generate appropriately sized thumbnails as a progressive-graceful option. Use AlphaImageLoader only when unavoidable and test for caching/position quirks.

Recommended Answers

All 4 Replies

Member Avatar for Ritesh_4

thanks for these links
I however found can also use the IEFilters to do so:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

However in my case, I am loading my images dynamically from a php function in my html code, and would like to know how I can adapt this to the IEFilters...

Member Avatar for Troy III

Here you can try this function :

function setImage(targetElement, imageURL) {    
    if (typeof(targetElement)=="string") 
    { 
        targetElement = document.getElementById(targetElement);

        targetElement.style.filter = 
            "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + 
            imageURL + 
            "',sizingMethod='scale')";
    }
}

setImage( [arg1], [arg2] );

arg1 - a) image container element or b)its "id"; //format: a) object, or b) "string ";
arg2 - url\image ; //format: "sring" only;

Member Avatar for Ritesh_4

thanks wil give this a try

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.