the Elusive Auto-Resizing Background Image
October 31, 2010

This page documents my attempts to create a webpage with an auto-resizing background image - I've been trying to do this since 1996. As you MAY be able to see, it is possible, with the notes I provide below. The Verdict, as of 2010, is that this is STILL not possible, for general consumption. In 1996, I concluded it wasn't possible, tried again in July 1999 with some Javascript, concluded it wasn't possible, and now in 2010 it is possible, using a CSS2 layer hack, for backgrounds only, but not for IE6, and it will look distorted on widescreens. So it's still not safe to put on the web.

I plan on revisiting this again in approx 2012, when IE6 is really dead and CSS3 is supported by all the major browsers, and a way to degrade acceptably on widescreen is found........

This page implements a tweaked version of the "fake" method described by Jennifer Kyrnin in her post How Do you Stretch a Background Image in a Web Page. The "best" method is to use CSS3's background-size property, however, it is not yet implemented in any browser (as of Oct 2010).

I made one tweak to the CSS on the above URL - I added z-index:-1; to the CSS for the img tag (see the source of this page for an example). This removes the requirement that the image be the first element on the page, and thus the need for the "content" div mentioned by Jennifer.

Because this code uses fixed positioning starting at (0,0), it cannot be used with in-page tables, divs etc - only for backgrounds. The URL above does describe a method for doing in-page tables etc but it looks fragile to me, and I think it's better to wait for CSS3.

This code does NOT work with IE6, even if the if-IE6 portion is included - so if it was used on a site that browser would need to be excluded, using a detection script ... just wait a bit, IE6 is dying, and CSS3 is coming...

Even with CSS3, if the aspect ratio of the display differs from the aspect ratio of the image, there will be distortion, in particular, circles will become ellipses, etc, and this will happen on all widescreens, for example.