div背景をどのように重ねるのですか？

Question

ここでは、両方のCSS背景画像を設定した2つのdivがあります。 divをオーバーラップさせて、ドット付きのオーバーレイを作成できるようにしようとしています。 私はそれを正しくやっているように感じますが、間違った部署が来ています。 これはなぜ起こっているのですか？

はここでウェブサイトです：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--> 

マイ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; 
} 

みんなありがとう！

Answer 1

私はあなたの問題は、あなたが通常はちょうど兄弟であるべきである一方で、他の中の重複する要素の1つを入れ子にしていることだと思います。

はそれを行う方法については、このフィドルを参照してください：http://jsfiddle.net/GCprD/

Answer 2

しかし、あなたのHTML構造でそれを行うことは不可能ではありません！

http://jsfiddle.net/GCprD/1/

しかし、私はM90のソリューションが優れていることに同意するものとします。