Question

Typically IE doesn’t support the CSS3 background-size and I’m looking for a workaround.

I tried placing an image as the first thing on a page an setting the CSS such as:

#bg_stretch {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
}

Works good width wise, but adding a height: 100% doesn’t work so it covers the length of the page.

Answer 1

Are you looking for this?

http://jsfiddle.net/VMzFB/

CSS:

#stretch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;

    /* only ie7 needs this */
    height: 100%;
}
#stretch img {
    width: 100%;
    height: 100%;
    display: block
}

HTML:

<div id="stretch">
    <img src="http://dummyimage.com/256x256/f0f/fff" />
</div>

If that’s not quite right, look at the ideas here:

http://css-tricks.com/3458-perfect-full-page-background-image/