shadowline
How do you ... stretch a background image?
Version 2.

Our original background stretch coding was good, but not fully functional. As text went beyond the boundaries of the window, the background image was ended and white space was found. This updated and more functional coding is the work of a coder called _Aerospace_Eng_. All kudos and honors go to him.

The trick to stretching an image in the background is to not have the image in the background. Instead, it is placed on the webpage (like any other image) and everything else is layered on top of it using css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>

<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>


test it out... click here for example.

Note : as always, if you are stretching an image into a size that is not the original, the image itself may become distored or blurry.
How do you ... stretch a background image?
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow