WWW FAQs: How do I make a background image fill the entire browser window?

2006-06-30: CSS would seem to be the answer... and you can come close to solving the problem with CSS. Unfortunately, CSS doesn't currently provide an easy way to guarantee that a background image exactly fills the entire browser window in every popular modern browser. Especially not if we want to preserve the proportions of the original image. But we can do it with JavaScript and DHTML!

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.

2. Only users with JavaScript turned on will see the background image, so set a reasonable background-color style as a fallback.

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.

Experts may wonder why I don't just give the background <div> a z-index of -1. The reason: Firefox assumes any element with a negative z-index should not appear at all. You might also wonder why we don't use a background-image style. The trouble there is that there's no way to resize the background image... and that's the feature you came here for!

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.

The jumpiness is due to the need to move the background image every time the user scrolls. Better browsers like Firefox and Safari support the position: fixed style, which makes this unnecessary. Internet Explorer 7 can do it too.

Demonstration

Not 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).

Implementing a Self-Resizing Background

Decided to go for it? Great! Here's the HTML source for a page with a self-resizing background, and a link to download the resizing_background.js JavaScript code that the page relies upon. There's quite a bit of JavaScript because of the need to resize the image on the fly in all browsers, and the need to reposition the image when the scrollbar is moved in Internet Explorer. Someday CSS3 will do all of this for us, but in the meantime, it takes a little work, especially to get the proportion-preserving features I provide here.

Instructions:

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"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YOUR TITLE GOES HERE</title>
<script src="resizing_background.js">
</script>
</head>
<body onLoad="rbInit()" onResize="rbResize()">
<script>
// "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.
rbOpen(true);
</script>
YOUR CONTENT GOES HERE
<script>
rbClose("YOUR_BACKGROUND_IMAGE_FILENAME.jpg");
</script>
</body>
</html>

All of the things you need to change are capitalized for your convenience.

That's all there is to it!

Already have a page design? Don't wish to start from a template? Just follow the detailed instructions provided at the top of resizing_background.js.

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.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.