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?

Make sure it is compatible refer http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie — sathish, Feb 03 '11 at 11:15
As pointed out by @RSK, `background-size` doesn't work in IE8. — Pekka, Feb 03 '11 at 12:52
Ok, but as you can see in title, I need an IE 8 fix... Thank you guys. — Thomas, Feb 03 '11 at 12:56
Considering that only the very newest versions of most browsers (in some cases just the current beta versions) support `background-size`, you'll need a "fix" for more than just IE8. It's probably more sensible to rework your design, so that it doesn't need this. Or use an absolute positioning to place an image (not a background image) underneath the rest of the page. — RoToRa, Feb 25 '11 at 09:04

score 147 · Answer 1 · edited May 23 '17 at 12:17

147

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.

edited May 23 '17 at 12:17

Community

1
1

answered Feb 07 '12 at 00:26

Capagris

3,811
5
30
44

21

The filter has a major flaw, in that it freezes any links inside the allocated area. – user890332 Apr 24 '12 at 13:15
13

Also note the image path must be relative to the document rather than the CSS file. – Ash Aug 08 '12 at 10:39
its less than perfect but it gets the job done – Capagris Aug 08 '12 at 23:29
2

is it possible to tell ie to scale the picture proportional..? – honk31 Oct 01 '12 at 08:36
1

allegedly it should, as the sizing method is 'scale', but it seems to fail – Capagris Oct 02 '12 at 02:25
1

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! – big_smile Jul 19 '13 at 10:25
A fixed position div with 100% width and height rather than ptting this on the body will fix the broken links issue – KTastrophy Aug 14 '13 at 15:26
Also, this method is not working with animated gifs – Nicu Surdu Jan 21 '14 at 12:59
5

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 http://jsfiddle.net/2VgjD/1/embedded/result/ – fregante Feb 03 '14 at 14:50
this also doesn't work for pseudo-elements http://stackoverflow.com/a/10669986 – mark Aug 28 '14 at 20:54
using sprites and `background-size: cover` will always cause problems - that's not specific to this fix. – ProblemsOfSumit Sep 01 '14 at 12:12
I am confused, where should we write this code? – Hosein Aqajani Dec 05 '16 at 06:14

score 89 · Answer 2 · answered Apr 13 '12 at 19:25

89

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

answered Apr 13 '12 at 19:25

Louis-Rémi

1,768
1
13
14

This works incredible well! Thanks mate for saving my day! – pascalvgemert Apr 06 '13 at 15:07
Thanks, but this plugin seems to be having its own issues when applied to *body*. – RobinJ Jun 22 '13 at 12:09
16

Note that this plugin has apparently been superseded by https://github.com/louisremi/background-size-polyfill – Geoff Sep 17 '13 at 22:06

score 20 · Answer 3 · answered May 06 '13 at 03:56

20

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

answered May 06 '13 at 03:56

Muhammad Ahsan

1,870
2
20
31

1

This was already mentioned by the author (Louis Rémi) in a previous answer. – ndorfin May 06 '13 at 13:38
But not in this question, Right! – Muhammad Ahsan May 11 '13 at 07:00
Works perfect out of box! – Alex G Nov 25 '13 at 07:02

score 12 · Answer 4 · answered Apr 24 '12 at 19:29

12

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.

answered Apr 24 '12 at 19:29

user890332

1,315
15
15

score 4 · Answer 5 · answered Mar 23 '12 at 14:10

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.

IE 8: background-size fix

5 Answers5

Linked

Related