CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
oded
oded

Reputation: 155

Stretching an image background width won't work in IE8

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;
}

Upvotes: 1

Views: 3013

Answers (3)

Gavin
Gavin

Reputation: 7944

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.

Upvotes: 0

Saeed
Saeed

Reputation: 3775

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')";
 }

Upvotes: 0

Naman Goel
Naman Goel

Reputation: 1612

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

Upvotes: 3

Related Questions