Stretch a background image in IE8

Question

I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.

.box:before {
    background: url(images/body_background2.png) no-repeat;
    display: block;
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    content: '';
}

Answer 1

Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.

See the following article for further information: How Do you Stretch a Background Image in a Web Page.

If you wish to use an image as a background for a given <div> try the following approach:

<div class="fullbackground">
    <img class="fullbackground" src="yourImageSrc" />
</div>

.fullbackground{
    position:relative;
}
img.fullbackground{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; /* alternative: right:0; */
    height:100%; /* alternative: bottom:0; */
}