HTML: set 4 <div> as background

Question

I have a layout, here is 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 this is 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 only be the background of the page ... Unfortunately, if I add text to some other div, then the "content" rectangle overlays the rest. How can i fix this? Actually I want a menu bar, which is the top layer and overlays everything under it ...

Answer 1

Ok, before you look at my jsFiddle-Solution:

• Remember that using div for such backgrounds is not a great solution. It is best to use a background image on your body tag that you stretch with the background size. It is supported in all modern browsers. The only problem will be IE8 and below.

• Your CSS is a mess. When styling elements with similar attributes, use a class, instead putting each identifier.

I basically created a new div with your custom content and class on your background divs. I also had to clean my CSS and remove 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; }