IE 8: background-size fix

Question

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?

Solution 1

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.

Solution 2

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

Solution 3

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

https://github.com/louisremi/background-size-polyfill

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[user890332]

The filter has a major flaw, in that it freezes any links inside the allocated area.

[Ash]

Also note the image path must be relative to the document rather than the CSS file.

[Capagris]

its less than perfect but it gets the job done

[honk31]

is it possible to tell ie to scale the picture proportional..?

[Capagris]

allegedly it should, as the sizing method is 'scale', but it seems to fail

[Sumith Harshan]

It worked perfect! Thanks a lot.You saved my time.

[pascalvgemert]

This works incredible well! Thanks mate for saving my day!

[ndorfin]

This was already mentioned by the author (Louis Rémi) in a previous answer.

[Muhammad Ahsan]

But not in this question, Right!

[RobinJ]

Thanks, but this plugin seems to be having its own issues when applied to body.

[big_smile]

If using this filter, I found that you can omit the -ms-filter option. Also, the URL should be relative to the HTML page and not the CSS file - I wasted a lot of time getting this to work, because I was doing it relative to CSS!

[KTastrophy]

A fixed position div with 100% width and height rather than ptting this on the body will fix the broken links issue

[Geoff]

Note that this plugin has apparently been superseded by github.com/louisremi/background-size-polyfill

[Alex G]

Works perfect out of box!

[Nicu Surdu]

Also, this method is not working with animated gifs

[fregante]

No, no, no. This filter doesn't keep the image proportions but instead the image the stretched to fill the container! It's the equivalent of "background-size: 100% 100%". Open this in IE8 to see it jsfiddle.net/2VgjD/1/embedded/result

[mark]

this also doesn't work for pseudo-elements stackoverflow.com/a/10669986

[ProblemsOfSumit]

using sprites and background-size: cover will always cause problems - that's not specific to this fix.

[Hosein Aqajani]

I am confused, where should we write this code?