title: How to add a 20px div above a header background image (with Fiddle)
body: <p>On the top of my page I have a background image as below ( <a href="http://jsfiddle.net/VnXxj/3/" rel="nofollow">http://jsfiddle.net/VnXxj/3/</a> )</p>
  
  <pre><code>&lt;div id="header"&gt;
  Register/Login
  &lt;/div&gt;
  
  #header {
      background: url("image.png") repeat-x scroll center bottom;
      height: 37px;
      padding: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2;
  }
  </code></pre>
  
  <p>Instead of increasing the image's height in Photoshop, is there any way to add a 20px height div above the image?</p>
  
  <p>I tried  <code>background: url("image.png") repeat-x scroll center bottom #888888;</code> but the image it has a transparent ending and it mess it.</p>
  
  <p>Thank you for this</p>