Stretch image as background

Question

I need image to stretch as background of page. It doesn't matter if page will not scale well, what ever screen resolution may be, whole image has to be visible on screen. I found some solutions on Google, but it either didn't work in Firefox2 or IE6 or both, and I need those two too. I hate when people don't upgrade their software, but I'm still see these browsers in google analytics data hitting web page, especially IE6.

Is there good cross browser solution for this?

Answer 1

It is not possible in CSS1 or CSS2, however it is possible in CSS3: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

However this is not available to IE6.

An alternative would be using background-repeat, or this site has something that might work (I havent checked if it works): webdesign.about.com/od/css3/f/blfaqbgsize.htm

I know what you mean about users not upgrading browsers, but at what point do you stop coding for IE5, or even IE4?

Good luck,

Matt

Answer 2

A good alternative would be to use a "static image" that fades out to a pattern or solid color. That way you still get your background image (however big you want it) and scalability.

In CSS3, you can use background-size: 100%;

Firefox 3.5 supports some CSS3 properties, but I don't believe they support EVERYTHING yet... (I think).

Answer 3

You could use a good old fashioned img tag, but don't specific height and width attributes. In your CSS position it absolutely with a low z-index, and height/width both set to "100%".

Put everything else on the page in another div with a higher z-index

Like this:

<style type="text/css">
#stretchy {
    postion: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#everything_else {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>

...

<img src="/images/myimage.jpg" id="stretchy" />

<div id="everything_else">
    ...
</div>

See http://axoplasm.com/lost.html for an example.

It's not exactly a "background image" (and probably not W3C standards-compliant CSS) but it works.

Answer 4

I don't want to hijack this question, but if you had this code:

background-image: url('images/background.gif');
background-size: 100%;

This repeats the image in all current browsers (IE, FF, GC, SF, OP) which while unsavory works across all the browsers, unlike the z-index depth method (I have a complex foreground).

However if a browser was to suddenly get bg-size CSS3 support, does the CSS3 spec say what should happen? Should it stretch the image or do what it always did and repeat?