Scaling with background images IE8

Occasionally you may have the need to make some parts of a reponsive site work in IE8 as painful as that is. Often background images are used in newer browsers and scaled to fit their element. In IE this doesn’t work that well so the following jQuery snippet allows you to get rid of the background image that has been set and replace it with an IE specific filter that should resolve this issue. This is best used when the background image has been set using inline CSS (which often happens in content managed sites)

           var image = $(this).css('background-image');  
           image = image.replace('url("',"").replace('")',"");                                             
           $(this).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + image + ", sizingMethod='scale'");     
           $(this).css('-ms-filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + image +  ", sizingMethod='scale')");             
           $(this).css('background-image',"none"); 

Combine this with my solution for detecting if the user is using IE 8 and a you have a useful solution.

 if (!$.support.leadingWhitespace) {
            if ($.browser.msie && parseFloat($.browser.version) <= 8) {
                var image = $(this).css('background-image');  
                image = image.replace('url("',"").replace('")',"");                                             
                $(this).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + image + ", sizingMethod='scale'");     
                $(this).css('-ms-filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + image +  ", sizingMethod='scale')");             
                $(this).css('background-image',"none"); 
            }
        }

Leave a Reply