7/03/2009 03:33:00 PM Posted by Blogger Blogspot
Sometimes designers want to be able to have a background resize automatically to fit the entire screen; no matter its size. This is very unpractical and 99.9% of the times it is not recommended, but it can serve a good purpose every now and then.
First of all, it is not done “naturally” through HTML. Background images are not supposed to work that way and, furthermore, any self-respecting web designer will tell you NEVER LET THE BROWSER RESAMPLE YOUR IMAGES.
Resampling an image, which is the process of changing its original size, has two negative effects when it comes to the browser handling it:
- The image will probably lose quality (the amount depends on the size difference)
- Resampling and rendering (displaying the image) slows your page down. Every time your visitor scrolls the page, your image needs to be rendered again and the resample puts extra pressure on the render.
Nevertheless, sometimes resizing the background automatically to fit the entire screen can be useful; especially when there is none or little scrolling involved in a page where the visual presentation outweighs functionality.
Here is the code to resize the background:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test page</title>
</head>
<body style="padding:0px; margin:0px; overflow:hidden;"><div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"><img src="http://www.netbulge.com/gallery/firefox3.jpg" width="100%" height="100%"></div>
<div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll;">
<p> </p>
<p>THIS IS THE CONTENT</p></div></body></html>
It has 2 layers (divs), one for the background and another one on top for the content of the page. The TRANSITIONAL declaration of the document is very important. IE will not display this correctly if you use a STRICT declaration.
If you need to fit the background of your web page to fit the entire window, try this code, but I would strongly suggest you reconsider your options.
Instead of resizing the image you can use a big image and center it as the background. You can use 3 versions of the background image: 800x600, 1024x768 and 1600 x1200 to fit different users’ screen resolutions; (and check the resolution using scripting.)
It may be better to lose the edges of the background than to resample the image to fit whatever window size the visitor has.
