背景不移動，無法弄清楚

Question

我試圖讓這個screenshot的白色部分向下移動到白色部分的頂部正好在紅色和白色分開的地方，然後希望標誌只是走略微超過白色部分。我已經爲此工作了2天，沒有任何工作和幫助。

<div id="header"> 
    <span id="header_icon"></span> 
    <div id="header_content"> 
    <div id="site_title">       
     <a href="index.html" target="_parent"> 
     <img src="images/sltlogobolt.png" alt="LOGO" height=400 width=350> 
     </a> 
    </div> 
    <p></p>  
    </div> 
</div> <!-- end of header --> 

<div id="main_content_top"></div> 
<div id="main_content_middle"> 
    <span id="main_content_top"></span> 
    <span id="main_content_bottom"></span> 
</div> 

#header_content img { 
    position: absolute; 
    top: 25px; 
    left: 50px; 
    z-index: 1; 
} 

#main_content_top { 
    width: 984px; 
    height: 30px; 
    background: url(images/content_top.png) no-repeat; 
} 

#main_content_bottom { 
    width: 984px; 
    height: 30px; 
    background: url(images/content_bottom.png) no-repeat 
} 

#main_content_middle { 
    position: relative; 
    width: 900px; 
    padding: 10px 42px; 
    background: url(images/content_middle.png) repeat-y 
} 

Answer 1

#main_content_top { 
width: 984px; 
height: 30px; 
margin-top:50px; 
background: url(images/content_top.png) no-repeat; 
} 

試試這個。