title: Fit background image to the whole screen no matter what size screen is
body: <p>I have a <code>&lt;header class="header"&gt;</code> and inside this header tag I have the navagation bar. Basically I'm setting the background image through the <code>header</code> class so I can put the rest of the <code>&lt;body&gt;</code> content below the image. My layout of the page is:</p>
  
  <pre><code>&lt;header class="header"&gt;
    &lt;nav&gt;
      navbar content
    &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;body&gt;
    all the text and images are here in the body
  &lt;/body&gt;
  </code></pre>
  
  <p>And here is my css:</p>
  
  <pre><code>html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  
  .header {
    width: 100%;
    height: 100%;
    margin: auto;
    background: url('../img/background.jpg') no-repeat;
    background-size: cover;
  }
  </code></pre>
  
  <p>The thing is that my background image fits perfectly and is responsive when I pull the website on my MacBook Air but when you pull up my website on a Mac desktop, the image doesn't fit the whole screen. I also have tried doing:</p>
  
  <pre><code>.header {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  }
  </code></pre>
  
  <p>But that didn't work. Is it possibly because of my image size? How do I make it so it fits the whole screen on ANY screen, including a large Mac desktop monitor?</p>