How do I make background-size work in IE

Question

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

User · Answer

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

User · Answer

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

User · Answer

In IE11 Windows 7 this worked for me   background-size  100  100

User · Answer

Thanks to this post  my full css for cross browser happiness is    lt style gt       backgroundpic           background-image  url  img home jpg            background-size  cover          filter  progid DXImageTransform Microsoft AlphaImageLoader          src  img home jpg           sizingMethod  scale           lt  style gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to internet-explorer