Background-size 100% not working in IE8 and IE7

Question

I have an empty div which contain a background image that is bigger than the size of the container. I fix this one by background-image property with the value (100% 100%). That's fine until you open the example in IE8 and IE7. Any solutions for that, even a javascript script or jquery plugin?

i.e: http://jsbin.com/imirer/1/edit

i.e: http://jsfiddle.net/bPTzE/

HTML:

<div class="container">
    <div class="background"></div>
</div>

CSS:

.container {
    /* an example width for responsive perpose */
    width: 500px;
}

.background {
    height: 27px;
    background: url("http://s18.postimage.org/jhbol7zu1/image.png") no-repeat scroll 100% 100% transparent;

    /* not working in IE8 and IE7 */
    background-size: 100% 100%;
}

The background-size property is not supported by IE7-8, see : http://caniuse.com/background-img-opts — darma, Feb 05 '13 at 10:17
I think this is the same issue : http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie — Aurélien Grimpard, Feb 05 '13 at 10:17
Why do you use div inside of div to set a background? Hope you are aware it doesn't make any sense what so ever? — MarcinWolny, Feb 05 '13 at 10:19
i made the container div just for and example of a small device MarcinWolny — elkebirmed, Feb 05 '13 at 10:20
i know that is not supported darma, but i need some JS solution for that — elkebirmed, Feb 05 '13 at 10:21
the same issue solution didn't work for me Aurélien Grimpard, and you can test that — elkebirmed, Feb 05 '13 at 10:24
there is a [background-size polyfill for IE8](https://github.com/louisremi/background-size-polyfill). — mindplay.dk, Jul 11 '13 at 14:38

Rais Alam · Accepted Answer · 2013-02-05T10:33:49.177

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

Jamir Khan · Answer 2 · 2013-02-05T10:32:35.710

1

background-size not supported by ie7 and ie8.

the alternative way you can use put 'tag' in div tag and add width 100% to it. It is full scalable.

try this code:

<div class="container">
    <img src="http://s18.postimage.org/jhbol7zu1/image.png" width="100%" />
</div>

or

html:

<div class="container">
    <img src="http://s18.postimage.org/jhbol7zu1/image.png" />
</div>

css:

.container img {
     width:100%
 }

edited Feb 05 '13 at 10:32

answered Feb 05 '13 at 10:23

Jamir Khan

397
1
13

can you reexplain that in more details? – elkebirmed Feb 05 '13 at 10:27

Background-size 100% not working in IE8 and IE7

2 Answers2

Linked