title: CSS centred header image
body: <p>I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div. 
  Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.</p>
  
  <p>I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.</p>
  
  <p>Please find my code below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapperHeader"&gt;
      &lt;div id="header"&gt;
               &lt;img src="images/logo.png" width="1000" height="200" alt="logo" /&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapperHeader{
      position: relative;
      background-image:url(images/header.png);
  }
  
  #header{
      left: 50%;
      margin-left: -500px;
      background:url(images/logo.png) no-repeat;
      width:1000px;
      height:200px;
  }
  </code></pre>
  
  <p>Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.</p>
  
  <p>Thanks!</p>