title: Bootstrap Full Height Background Cover Image
body: <p>I am currently designing a site using Bootstrap and am trying to include a full height background cover image like on this site: <a href="http://lewisking.net/" rel="noreferrer">http://lewisking.net/</a>.</p>
  
  <p>This is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header class="title"&gt;
  
  &lt;div class="cut"&gt;
  &lt;img src="" height=""&gt;
  &lt;/div&gt;
  
  
  &lt;h2&gt;Vintage Boutique Based in New York&lt;/h2&gt;
  
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#portfolio"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#contact"&gt;PRESS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header { 
  
    background: url(../img/nycfull.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .cut img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  }
  </code></pre>
  
  <p>However, I can't see to get the image to cover the entire "above the fold" section. The image just go as height as the text in the header. Any idea what I am doing wrong?</p>