 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 * Simple, powerful and reliable. There is not much more you can ask of your FTP. I used to switch FTPs a lot until I found this one; now I never have FTP problems. I do like FTP Voyager’s interface better, but given Filezilla's free nature… what can I say? I got emotionally attached. Often people ask the same question: What is the best PHP book? - The answer is so simple they still go ahead and buy some book. Besides being one of the most thorough manuals ever written, the online PHP manual includes user comments adding greatly to its richness. This is the first and most important resource a PHP coder should have. http://www.php.net/manual/en/ | 
45%