Stretching an image background width won't work in IE8

Question

I want to stretch the background of an a tag but it doesn't work in Internet Explorer 8. This is the code I'm using:

div.tabbernav div.tabberactive a{
    color:#fff;
    padding:11px;
    background: url(../images/bag_selected.png) ;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-repeat: no-repeat;
    height:43px;
}

Stretching images using CSS is most of time a very bad idea. Not only the result is most of time dirty, but the network cost can be higher than a static image of the desired dimension — Steve B, Oct 17 '12 at 10:03
Possible duplicate: http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie and a working IE8 example: http://jsfiddle.net/bNEqx/8/ — enenen, Oct 17 '12 at 10:12
Answer on this ticket http://stackoverflow.com/questions/19415191/scale-background-image-to-fit-ie8-window/19559311#19559311 — manish nautiyal, Oct 24 '13 at 07:15

score 3 · Answer 1 · answered Oct 17 '12 at 10:09

background-size is a CSS3 property and will generally not work in IE8. Also you missed the -webkit- -o- and -ms- prefixes.

That said, there is a way around this using the MS Filters. look at http://www.alistapart.com/articles/supersize-that-background-please/

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale')";

that works with background-size: cover

score 0 · Answer 2 · answered Oct 17 '12 at 10:12

You use this style code

div.tabbernav div.tabberactive a{
    color:#fff;
    padding:11px;
    background: url(../images/bag_selected.png) ;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-repeat: no-repeat;
    height:43px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');

   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
   src='images/logo.gif',
   sizingMethod='scale')";
 }

score 0 · Answer 3 · answered Apr 20 '13 at 11:12

Another cross-browser solution that is JavaScript-based with jQuery is to have something like:

<div id="mystretchedimage"><img src="image.jpg" /></div>

#mystretchedimage { width: 100%; height: 600px; overflow: hidden; }

jQuery('#mystretchedimage img').css({ width: $(window).width() });

Depending on your needs, such as my case, this may be a better solution for you.

Stretching an image background width won't work in IE8

3 Answers3