HTML: Set 4 <div> as background - html

Question

I've got a layout, here's my css:
body {
background-color: #16193B; /* Old browsers */
margin: 0;
padding: 0;
color: white;
background-attachment: fixed;
overflow: hidden;
}
html {
min-height: 100%;
height: 100%;
margin: 0;
padding: 0;
background-attachment: fixed;
}
#content {
width: 80%;
height: 1000px;
margin: 0 auto;
background-color: #ADD5F7;
overflow : hidden;
}
#wrap div{
height:100%;
width:100%;
}
#b1 {
width: 80%;
height: 1000px;
margin: 0 auto;
background-color: #35478C;
position:relative;
}
#b2 {
width: 90%;
height: 1000px;
margin: 0 auto;
background-color: #4E7AC7;
position:relative;
}
#b3 {
width: 90%;
height: 1000px;
margin: 0 auto;
background-color: #7FB2F0;
position:relative;
}
#b4 {
width: 90%;
height: 1000px;
margin: 0 auto;
background-color: #ADD5F7;
overflow : auto;
position:relative;
}
And thats in the body of the HTML-File:
<div id="b1">
<div id="b2">
<div id="b3">
<div id="b4">
<div id="content">
</div>
</div>
</div>
</div>
</div>
This is my layout, but it should just be the background of the page... Unfortunately if I add text to some other div then "content" the rectangle overlays the others. How can I fix this? Actually I want a menu bar which is the top "layer" and overlays all under it...

Answer 1

Ok, before you look at my jsFiddle-Solution:
Be aware that using divs for such backgrounds is not a beautiful solution. Best would be using a background-image on your body-tag, which you stretch with background-size. It's supported in all modern browsers. The only problem would be IE8 and downwards.
Your CSS is a mess. When styling elements with similar attributes, use a class instead styling every ID by itself.
I basically created a new div with your custom content and a class on your background-divs. I also had to clean up your CSS and deleted unnecessary statements:
-> jsFiddle <-
HTML:
<div class="centerIt" id="b1">
<div class="centerIt" id="b2">
<div class="centerIt" id="b3">
<div class="centerIt" id="b4">
<div id="content"></div>
</div>
</div>
</div>
</div>
<div id="contentContainer">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi laboriosam illum esse voluptas libero aperiam voluptate omnis dolor odio natus tempore sunt doloribus. Suscipit iure vel totam eius reprehenderit.</div>
</div>
​
CSS:
.centerIt {
position: relative;
margin-left: auto;
margin-right: auto;
}