How do I make background-size work in IE? - css

Question

Is there any known way to make the CSS style background-size work in IE?

Answer 1

A bit late, but this could also be useful. There is an IE filter, for IE 5.5+, which you can apply:
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 you're using a sprite, this may cause issues.
Specification: AlphaImageLoader Filter #microsoft

Answer 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.

Answer 3

Thanks to this post, my full css for cross browser happiness is:
<style>
.backgroundpic {
background-image: url('img/home.jpg');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/home.jpg',
sizingMethod='scale');
}
</style>
It's been so long since I've worked on this piece of code, but I'd like to add for more browser compatibility I've appended this to my CSS for more browser compatibility:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 4

Even later, but this could be usefull too. There is the jQuery-backstretch-plugin you can use as a polyfill for background-size: cover. I guess it must be possible (and fairly simple) to grab the css-background-url property with jQuery and feed it to the jQuery-backstretch plugin. Good practice would be to test for background-size-support with modernizr and use this plugin as a fallback.
The backstretch-plugin was mentioned on SO here.The jQuery-backstretch-plugin-site is here.
In similar fashion you could make a jQuery-plugin or script that makes background-size work in your situation (background-size: 100%) and in IE8-. So to answer your question: Yes there is a way but atm there is no plug-and-play solution (ie you have to do some coding yourself).
(disclaimer: I didn't examine the backstretch-plugin thoroughly but it seems to do the same as background-size: cover)

Answer 5

There is a good polyfill for that: louisremi/background-size-polyfill
To quote the documentation:
Upload backgroundsize.min.htc to your website, along with the
.htaccess that will send the mime-type required by IE (Apache only —
it's built in nginx, node and IIS).
Everywhere you use background-size in your CSS, add a reference to
this file.
.selector {
background-size: cover;
/* The url is relative to the document, not to the css file! */
/* Prefer absolute urls to avoid confusion. */
-ms-behavior: url(/backgroundsize.min.htc);
}

Answer 6

In IE11 Windows 7 this worked for me,
background-size: 100% 100%;

Answer 7

you can use this file
(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);
}

Answer 8

I tried with the following script -
.selector {
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}
It worked for me!