title: CSS/HTML5 Responsive Header Image
body: <p>I'd like my header image to scale with the browser size. 
  This is my current code for the att. screen grab, but this doesn't scale the image on smaller screens. Ive tried using the background image options but this doesn't achieve the look I want.</p>
  
  <pre><code>  .header-image {    
      position:absolute;
      top:0;
      bottom:0;   
      max-height:1000px;
      overflow:hidden;    
        left: 0; 
        right: 0;
      z-index:-1;         
        border:10px solid #545351;        
  }
  
  .header {
      width: 100%;
      padding-top:50px;
      margin-top:-10px;       
  }
  </code></pre>
  
  <p>&amp; HTML</p>
  
  <pre><code>&lt;div align="center"&gt;&lt;!-- big image --&gt;
          &lt;div class="header-image"&gt;&lt;img src="images/liveryHeader3.jpg"&gt;&lt;/div&gt;&lt;!-- end of big image--&gt;
  &lt;/div&gt;&lt;!-- end of center image class--&gt; 
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/x0oPD.jpg" alt="Screen Grab from current site"></p>
  
  <p><img src="https://i.stack.imgur.com/EnRlr.jpg" alt="Example of what client sees"></p>
  
  <p>The second image is roughly what shows on smaller monitor, the image hasn't scaled &amp; layout looks odd - Id like to scale the horse head so that the full image still shows. It seems to work on Android &amp; tablet, just not smaller monitors? </p>