背景不动，无法弄明白

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

试试这个。