...

View Full Version : backgrounds to "stretch" to fill page



naushikaa
09-05-2006, 04:39 PM
I grabbed this code from somewhere in order to get a "background" image to stretch to fit the whole page, with it's proportions changing to fit each user's different screen resolutions/window sizes.
Since backgrounds actually can't be made to stretch, this has been done by having an image stretched in one div, and the page contents in another div, but they're on a different z-axis. (so it's not strictly speaking, a "background")
Problem is, this code stretches the image to "fit to SCREEN", not the whole PAGE (meaning if I scrolled down, there's no background there).

How do I get the div and image to fill the page from top to bottom?

BTW, if it helps, my image is actually like a gradient that goes dark on both left/right edges, and light in the middle. 1px high.


<head>
<title>How to stretch a background image.</title>
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>

<body>

<!-- this creates the background image -->
<div id="bg_image">
<img src="images/scenery.jpg" style="width: 100%; height: 100%;">
</div>

<!-- this puts the contents of the page ontop of the background image -->
<div id="contents">
This is a test.
</div>

</body>

croatiankid
09-05-2006, 09:16 PM
if your open to browser scripting, then i'm sure there's a very simple solution using javascript, so i'd post this in js's forum

naushikaa
09-06-2006, 05:51 AM
Thanks for the suggestion, but so many have javascript disabled, so if there's another way...
Maybe if I could just get the first div to extend to the bottom of the page, not just 100% of the screen. Or somehow get the image to do that, instead of also 100% of the screen.
The only half solution I've had is making the height something huge like 1000%, or 3000px or somthing, but obviously, that leaves the background going on for ages after the contents finishes! Looks tacky.

_Aerospace_Eng_
09-06-2006, 05:59 AM
Thanks for the suggestion, but so many have javascript disabled, so if there's another way...
Maybe if I could just get the first div to extend to the bottom of the page, not just 100% of the screen. Or somehow get the image to do that, instead of also 100% of the screen.
The only half solution I've had is making the height something huge like 1000%, or 3000px or somthing, but obviously, that leaves the background going on for ages after the contents finishes! Looks tacky.

If you followed up on other threads you started on other forums you would have had this same answer yesterday. http://www.cssplay.co.uk/layouts/background.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum