 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.
Author : Esopo, Read 39463 times, Comments: 0| Rating : |   | | Tuesday, 19. April 2005 |
Add new comment/Comments
  Do you have something to say? Then say it! NetBulge.com is devoted to web development. We are always looking for fresh and relevant ideas. If you are a web designer with a voice, this is the place to make it heard.
Join us!
Featured * Many say this antivirus is much better than the leading AV in the market. The least I can say is that AVG performs extremely well and its price (free) is simply unbeatable. If you don’t have an antivirus right now or are not pleased with your current level of protection, you should give this one a try. An outstanding compilation of some of the best Flash sites out there. As usual with Flash sites, most are useless elaborated animations, but nevertheless worthwhile having a look. http://www.greg.ch/flash/ | 
45%