Background-size and IE8

[ChristinaHooper]

I’m having issues getting background-size to work in IE8 – does anyone have any suggestions??
http://internationaltowingmuseum.org/

[TheDoc]

background-size is not available to IE8: http://caniuse.com/#feat=background-img-opts

If you’re trying to use background-size: cover, check out this post: https://css-tricks.com/perfect-full-page-background-image/

[ChristinaHooper]

Yup – already checked out that page and I couldn’t get it to work. I’m thinking probably because I’m trying to do background-size:contain and not cover…?

[TheDoc]

Yes, unfortunately they do slightly different things. Is there any particular reason why you’re using contain instead of cover?

[ChristinaHooper]

Honestly – because cover didn’t give the right effect and I’m stuck using that image for the background – my client was veeeeery insistent on that.

[TheDoc]

That’s a tough call, then. I’m not sure if there’s a solution for you. Perhaps for IE8 and lower you can go with a cover method?

[ChristinaHooper]

It looked reaaally bad with cover… so I’m thinking that won’t work. Hmmmm… surely there has to be a way… javascript, jquery, something. The first VP of the museum uses IE8 and won’t upgrade – so I don’t have a choice but to make it work. I don’t have to go any older than IE 8 though.

[ChristinaHooper]

Anybody have any suggestions at all for this one? I’m open to anything that works in IE8 and still has a similar look to what I have now.

[ChristinaHooper]

Ok – found a workaround – not ideal, but it works:

[louisremi]

I have created a [background-size polyfill](https://github.com/louisremi/background-size-polyfill “background-size polyfill”) for IE8 that is really simple to use:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

[metafalica]

I created background-size-emu pure JS library that adds support of background-size to ie6, ie7, ie8 and ie9 in quirks mode.
It’s free and you can find it here: https://github.com/Metafalica/background-size-emu

[Author]

Posts