I've got a fairly simple page where I want to create something like this:
[------------------div - 100px filler color-----------------]
[------------------h1 - height 100px----------------------]
[--------------- div - 100%-(100px+100px)-------------]
The HTML I'm working with is:
<body>
<div id="header">
</div>
<h1>Big Old Text</h1>
<div id="footer">
</div>
</body>
The CSS is:
body {
margin: 0px;
padding: 0px;
}
.background {
/* background: url(rotate.php) no-repeat center fixed; */
background: url(background_image_05.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
background-color: rgba(255,0,255,0.10);
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
h1 {
letter-spacing: 0.1em;
font-size: 72px;
text-align: center;
padding-bottom: 25px;
padding-top: 30px;
display: block;
position: relative;
height: 100px
}
#footer {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(255,0,255,0.10);
}
I don't want any scroll bars. I tried to modify a version of this earlier answer, but it's not quite working out the way I want it to.