title: Scale div to fit background image
body: <p>I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image. </p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="mainHeaderWrapper"&gt;
  
  
  &lt;/div&gt;&lt;!--end mainHeaderWrapper--&gt;
  &lt;br class="clear" /&gt;;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>    #mainHeaderWrapper{
  
  
       background: url(http://localhost/site/gallery/bg1.jpg);
       width: 100%;
       height: auto;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover; 
       background-size: 100% 100%;
  
       background-repeat: no-repeat;
       background-position: center center; 
  
   }
  
   .clear { clear: both; }
  </code></pre>
  
  <p>Thanks for any and all help</p>