IE background size not working

Question

I\'m trying to make a background stretch the entire body (width only). This works only on Chrome,Opera and Firefox. How can I make this work on IE too? O_o

b         


        

Answer 1

since background-size is CSS3 specific your gonna have to use something like this for it to work in IE

set your html and body to

html {overflow-y:hidden}
body {overflow-y:auto}

wrap the image you want fullscreened with a div #page-background

#page-background {position:absolute; z-index:-1}

then put this in your html file

<div id="page-background">
  <img src="/path/to/your/image" width="100%" height="100%">
</div>

** you will have to use some sort of reset to remove the margins and paddings, something like this

html, body {height:100%; margin:0; padding:0;}

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

background-size is not supported in IE for versions under 9. A cross browser solution is to use a jquery plugin like fullscreenr.