[HTML / CSS] Not so long.

[dannlea]

SO I'm working on a website and want a backdrop that stretches 100%.

I have looked all over for a code to do so, and have successfully found one that stretches 100%... Of the screen size, and then stops.

What do I mean?

Simply put, if my screen is 1024px high... The code will stretch that element to 1024px and then stop. So if the page ends up scrolling, the background will stretch to the bottom of the first page, but as you scroll into the second page, you lose the backdrop.

Here's what I'm using for HTML:

Code: [Select]

<div id="backdrop">
<div id="content" align="center">
<br>
<img src="img/IGNiTE.png" width="171" height="127" alt="IGNiTE Homepage">
<br>
<div id="nav">



</div>

<div id="middle">

If this content box extends into a second page, the backdrop ends at the end of page 1!

</div>

</div>
</div>

And CSS:

Code: [Select]

html, body {
min-height: 100%;
height: 100%;
}
html {
background: url(img/bg.png) fixed;
width: 850px;
margin: 0 auto;
}

body {
width: 850px;
margin: 0 auto;
}

div#backdrop {
background: #2c0000 fixed;
width: 850px;
margin: 0 auto;
height: 100%;
}
div#content {
background: #000 fixed;
width: 830px;
height: 100%;
margin: 0 auto;
overflow: visible;
}
#nav {
background: url(img/nav.png);
width: 792px;
height: 35px;
}
#middle {
background-color: #111111;
border: 2px solid #666;
width: 800px;
margin-top: 10px;
margin-bottom: 10px;
}

.split {
margin-top: 5px;
}
.nav {
margin-top: 5px;
}

Any ideas?