title: Positioning image under div in css
body: <p>I've got a question regarding positioning of two objects: image and div. <strong>I want bg2.png image to stay under div.</strong> I keep encountering problem with image pushing div down by img's height. How do I avoid that? </p>
  
  <p>I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
   &lt;img src="./images/bg2.png" class="bgimg" /&gt;
   &lt;div id="maincontent"&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      width: 100%;
      background: #000;
  }
  .bgimg {
      z-index: -1;
      overflow: hidden;
      left: 70px;
      position: relative;
      display: block;
  }
  #maincontent {
      height: 520px;
      width: 960px;
      margin: 20px auto;
      display: block;
      z-index: 8;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>
  
  <p>edit - what I'm trying to achieve:
  <a href="http://oi48.tinypic.com/2iihldw.jpg" rel="nofollow">Click me!</a></p>