contact :: legal :: webstats  also on this site: - select - home tech writings green business studies conspiracy popular pages welcome  also in this section:  tech index  most popular pages  search: Like this site? Your donation is welcome!

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.

Notes:

• Widescreen format (16:9 aspect ratio, WUXGA) is rubbish for business use (aside from spreadsheets), and should not be used... but right now (late 2010) lots of people use it (many laptops are WUXGA) - see discussion at The Widescreen Laptop Conspiracy
• Standard monitors are 4:3 (VGA, SVGA, XGA) - 1024x768, 1280x1024, 1600x1200 etc.
• Unless the spreadsheet has more than approx 15 columns, there is no advantage to seeing it on widescreen (not forgetting that with widescreen, 25% less rows will be visible). A standard XGA monitor can display approx 15 spreadsheet columns (when all columns are on their default widths) - and approx 50 rows.
• In controlled circumstances (eg. corporate intranet), where the aspect ratios of users' screens are known, this code would be fine - although widescreen users would see distortion, the answer to them is, get a normal monitor - this is a business environment, not a theatre...
• Much care needs to be paid to the contrast of the background image, so that foreground text etc are readable. In addition, avoiding images with shapes that will show distortion (such as a clockface) may be needed.
• The "fake" method requires 0 padding and margins, this may create a need for additional HTML or CSS to recreate padding, if needed.
• This approach cannot work because the width and height of the image cannot be defined:

  <script LANGUAGE="JAVASCRIPT">
   document.getElementById("bodytable").style.background="url('background_image.jpg') no-repeat";
  </script>
  

• see also: http://www.displaywars.com/