Background-Size 100% Not Working in Ie8 and Ie7

Background-size 100% not working in IE8 and IE7

since background-size is CSS3 specific which is not supported to IE you have to do 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;}

background-size not working in IE

background-size is a CSS3 property which isn't supported on IE8 and below.

You can also try this:

background:url(../siteImages/top_bar.png) 0 0 / auto 43px repeat-x fixed;

CSS property background-size with ms-filer not working in IE8

Background-size is not supported in IE8 as you can see here:
http://caniuse.com/background-img-opts. I'm not a big fan of css filters.

If you would like a fullscreen background image i suggest to use one of the following solutions:
http://css-tricks.com/perfect-full-page-background-image/

How do I make background-size work in IE?

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

How do I make background-size work in IE8?

This question got answered intensively here:

How do I make background-size work in IE?

The most popular fix is this background-size polyfill:

https://github.com/louisremi/background-size-polyfill

IE background size not working

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

---

Related Topics