There are a few catches:
1. You must be willing to accept a little bit of "jumpiness" when scrolling in Internet Explorer versions prior to the new Internet Explorer 7.
3. You'll need to make sure any absolutely positioned elements of your own have a z-index style greater than 0 so that they don't "fall behind" the background image, which is actually a regular <img> element inside a <div> element that has a z-index of 0. The z-index style allows one element to be positioned in front of another; that's how we get the background effect.
4. Images resized by the web browser never look as good as images resized "once and for all" by a professional graphics program. For best results, use an original sized for a larger screen. In any case, background images should always be subtle, if they are used at all. Anything that interferes with readability is usually viewed as an annoyance.
5. You must specify the right DTD (Document Type Definition) at the top of your web page. Otherwise browsers like Internet Explorer 7 will assume your page is old-fashioned and run in a "quirks mode" that doesn't support important features we'll be using.
The self-resizing background will be rock solid in Safari, Firefox, Opera, and Internet Explorer 7, and work well in other recent versions of Internet Explorer too, except for slight jumpiness when scrolling. Extremely ancient browsers like Netscape 4 (used by less than 1% of the population) simply won't display the background image. If this concerns you, be sure to provide a reasonable background color as an alternative.
DemonstrationNot sure whether this method is for you? Sometimes a demo is worth a thousand words. So check out the demo page and see what you think (opens in separate window).
1. download resizing_background.js (provided in a zip file).
2. Upload resizing_background.js to your own website. Put it in the same folder with your page. You could also put it in a scripts folder and use an absolute URL in the script element below to always fetch it from the same place.
3. Create your page based on this template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<title>YOUR TITLE GOES HERE</title>
<body onLoad="rbInit()" onResize="rbResize()">
// "true" means "keep the proportions of the original image."
// If you pass "false" the image fills the whole window,
// even if it must be distorted to do so. Experiment.
YOUR CONTENT GOES HERE
All of the things you need to change are capitalized for your convenience.
That's all there is to it!
Note the onLoad, onResize and onScroll handlers. If you need other handlers for these as well, just insert my calls first followed by semicolons. You can call more than one function from a single event handler.
Thanks to master web designer Art Delano for his input on this article.
Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!