バックグラウンドイメージをsizechanging divの末尾にアタッチ

Question

部分的に透明な背景が重なっているdivをいくつか定義しましたが、そのうちの1つをdivの下部にアタッチしたいと思います。しかし、divにコンテンツを追加すると、最小高さを指定したバックグラウンドがアタッチされます。これはIE以外のすべてのブラウザで発生します。 これは私のコードです：

#content1 { 
    background-image: url(image/main_background.png); 
    margin-left: 12px; 
    margin-right: 12px; 
    /*margin-top: 0px; 
    margin-bottom: 0px;*/ 
    border-style: solid; 
    border-left-width: 3px; 
    border-right-width: 3px; 
    border-top-width: 0px; 
    border-bottom-width: 0px; 
    border-color: #000000; 
    width: 976px; 
    min-height: 355px; 
    float: left;  
    } 
#content2 { 
    background-image: url(image/top_gradient.png); 
    background-repeat: repeat-x; 
    width: 976px; 
    min-height: 355px; 
    } 
#content3 { 
    background-image: url(image/bottom_gradient.png); 
    background-repeat: repeat-x; 
    background-position: 0% 100%; 
    width: 976px; 
    min-height: 355px; 
    } 
#content4 { 
    background-image: url(image/top_background.png); 
    background-repeat: no-repeat; 
    width: 976px; 
    min-height: 355px; 
    clear: both; 
    } 

と

<div class="container"> 
    <div id="content1"><div id="content2"><div id="content3"><div id="content4"> 
     <div id="content_elements"> 
      <::content::> 
     </div> 
     <div id="sidebar_elements"> 
      <::sidebar::> 
     </div> 
    </div></div></div></div> 
</div> 

ありがとうございました！

Answer 1

はこの作品ん：background: url('background.png') no-repeat bottom;をそうノー・リピート後下を追加します。