Background size 100% doesn't work in IE8 and IE7
I have an empty div that contains a background image that is larger than the container size. I am fixing this by property background-image
with value (100% 100%). This is fine until you open the example in IE8 and IE7. Any solutions for this, even a javascript script or jQuery plugin?
ie: http://jsbin.com/imirer/1/edit
ie: 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%;
}
source to share
since the background size is specific to CSS3 which is not supported by IE you need to do something like this for it to work in IE
set html and body
html {overflow-y:hidden}
body {overflow-y:auto}
wrap the image you want fullscreen with 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'll have to use some sort of reset to remove margins and shims, something like this
html, body {height:100%; margin:0; padding:0;}
source to share
background size is not supported by ie7 and ie8.
alternative way is to use put 'tag' on div tag and add 100% width to it. It is fully 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%
}
source to share