Background Image Resize

Click the form button in the left column to see this technique in a new window.

Resize the window, and the background image will scale to fit the new window size. Well, not the background image, actually, but an image that seems to be a background image.

Scaling images and related browser features and/or limitations have been discussed in great detail in our Dynamic Images column. Here, we will concern ourselves with the mechanics of this particular adaptation.

The Logic

1. In order for an image to appear to be "in the background," it must be placed in a positioned element that resides outside the regular page flow. This element must be positioned at the top-left of the page. An image is then placed in the element that has a WIDTH equal to the window's inner width and a HEIGHT equal to the window's inner height. This HTML must be written dynamically, since we have no way of knowing the final user's window dimensions.

2. We set the onresize handler for the window to call a function when the window is resized

3. For Explorer, we simply resize the image to the new window dimensions. For Navigator, we reload the page, resulting in the positioned element and the image being re-created, giving the illusion of image scaling.

Browser Quirks

In developing this short script, we ran into an unbelievable amount of small problems related to browser quirks. For example:

• Navigator knows the inner dimensions of a window immediately, since it stores them in properties of window. Explorer waits until the BODY tag appears, since the dimensions are stored in properties of document.body.

• Explorer will place an element below the page-proper in z-order if the element's z-index is set to -1. Navigator requires the element to be created first on the page.

• Navigator usually prefers an element to be declared in the STYLE tag and not with the STYLE= attribute. In this case, however, a dynamic setting of the STYLE= attribute was to only way to get the desired effect.

• Even though the positioned element was given values of 0 for top and left, Navigator ignored them, requiring the BODY tag attributes of MARGINWIDTH and MARGINHEIGHT to be set.

• and many, many, more!

Advice

Use this technique sparingly when dealing with Navigator. Preferably, keep the image's positioned element as the only positioned element on your page. For Explorer-only pages, the technique has no problems.

Use this technique in short or windowed pages, like our example. Long pages, like the one you are reading, are, of course, not suited for this effect.

With that said, let's look at the code.