I've tried to add background size to IE but it's not working at all:
HTML
<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>
CSS:
div#content h2#news {
background: url('../images/news-background.jpg') no-repeat;
background-size: 100%;
border-radius: 20px;
color: #fff;
margin: 20px 0 0 20px;
padding: 8px 20px;
width: 90%;
-moz-background-size: 100%;
-moz-border-radius: 20px;
-webkit-background-size: 100%;
-webkit-border-radius: 20px;
}
What's wrong with the filter?
This question is related to
css
xhtml
filter
width
background-image
As pointed by @RSK IE8 doesn't support background-size. To figure out a way to deal with this, I used some IE specific hacks as showed here:
//IE8.0 Hack!
@media \0screen {
.brand {
background-image: url("./images/logo1.png");
margin-top: 8px;
}
.navbar .brand {
margin-left: -2px;
padding-bottom: 2px;
}
}
//IE7.0 Hack!
*+html .brand {
background-image: url("./images/logo1.png");
margin-top: 8px;
}
*+html .navbar .brand {
margin-left: -2px;
padding-bottom: 2px;
}
Using this I was able to change my logo image to a ugly resided picture. But the final result is fine. I suggest u try something like this.
Also i have found another useful link. It is a background hack used like this
.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }
As posted by 'Dan' in a similar thread, there is a possible fix if you're not using a sprite:
How do I make background-size work in IE?
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
However, this scales the entire image to fit in the allocated area. So if your using a sprite, this may cause issues.
Caution
The filter has a flaw, any links inside the allocated area are no longer clickable.
I created jquery.backgroundSize.js: a 1.5K jquery plugin that can be used as a IE8 fallback for "cover" and "contain" values. Have a look at the demo.
Solving your problem could be as simple as:
$("h2#news").css({backgroundSize: "cover"});
I use the filter solution above, for ie8. However.. In order to solve the freezing links problem , do also the following:
background: no-repeat center center fixed\0/; /* IE8 HACK */
This has solved the frozen links problem for me.
Source: Stackoverflow.com