title: White space below background cover responsive
body: <p>I'm trying to create a responsive website but ran into a problem with the background. It doesn't stretch the way it should. </p>
  
  <p>Here's a fiddle with my code: <a href="http://jsfiddle.net/8jd1hax4/" rel="nofollow">http://jsfiddle.net/8jd1hax4/</a> 
  And here's the bit of my CSS with the background</p>
  
  <pre><code>body{
  background-image:url('Background.jpg');
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center; 
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  -ms-content-zooming: none;
  max-width:100%;
  max-height:100%;
  font-family: 'Scout', arial, sans-serif;
  color:#fff;
  }
  </code></pre>
  
  <p>You can best see my problem when you make the fiddle more narrow, the white space appears at the bottom. It also shows the white space on my mobile, which is weird because I added a media query for that size. </p>
  
  <p>Any idea how to get it to stretch all the way to the bottom? I've tried adding a transparent border and padding on the bottom, both to no avail. </p>
  
  <p>Thanks! :)</p>