CODEWITHSUNDEEP
css
Brett
Brett

Reputation: 20079

Alternatives to background-size?

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.

Upvotes: 1

Views: 2791

Answers (2)

thirtydot
thirtydot

Reputation: 228282

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/

Upvotes: 1

DanMan
DanMan

Reputation: 11562

Try adding bottom:0; to that CSS rule.

Upvotes: 0

Related Questions