Question

Here I have two divs with a css background images set for both.
I’m trying to get the divs to overlap so I can have a dotted pattern overlay.
I feel like I’m doing it correctly but the wrong div is coming forward.
Any ideas why this is happening?

Here’s the website: http://designobvio.us/portfolio/body.html

HTML:

<section class="bodySection">
 <div id="body-wrapper" class="container_12">

  <div id="left-container" class="grid_5">
   <div class="content">
   </div>
  </div><!--end of left-container-overlay-->
 </div><!--end of left-container-->
</div><!--end of body-wrapper-->

</section><!--end of bodySection-->

My CSS:

 #left-container {
    background:url(../img/sliderBG.png)transparent repeat;
    width:400px;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    overflow:hidden;
    display:block;
    height:100%;
    top:0;
    z-index:5;
}
#left-container .content {
    background:url(../img/Me.jpg) repeat-y;
    width:400px;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    overflow:hidden;
    display:block;
    height:100%;
    top:0;
    z-index:1;
}

Thanks guys!

Answer 1

I do think your problem is that you are nesting one of the overlapping elements inside the other whereas they should normally be just siblings.

See this fiddle for a way to do it: http://jsfiddle.net/GCprD/