Elements the Game Forum - Free Online Fantasy Card Game

Other Topics => Off-Topic Discussions => Tech Talk => Topic started by: dannlea on May 18, 2013, 01:32:59 am

Title: [HTML / CSS] Not so long.
Post by: dannlea on May 18, 2013, 01:32:59 am
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?
blarg: