title: CSS background using "background-size: cover" doesn't fit the full height
body: <p>I'm making a page that will just display an SVG image, and here are the requirements:</p>
  
  <ul>
  <li>the vector should take up the entire window</li>
  <li>the vector should maintain its aspect ratio (defined in the SVG file itself)</li>
  <li>the vector should crop/clip in order to prevent skewing</li>
  </ul>
  
  <p>The CSS...</p>
  
  <pre><code>body {
    background: url(/path/to/image.svg);
    background-size: cover;
  }
  </code></pre>
  
  <p>...works <em>almost</em> perfectly except that when the browser window becomes too narrow it tiles instead of cropping/clipping.</p>
  
  <p>Here are some screen shots (please ignore the artifacts left by dabblet):
  <img src="https://i.stack.imgur.com/TnFfq.png" alt="window close to aspect ratio"></p>
  
  <p>Here the window is close to the aspect ratio of the original image
  <img src="https://i.stack.imgur.com/rancG.png" alt="window &quot;shorter&quot; than aspect ratio"></p>
  
  <p>Here the window is "shorter" than the aspect ratio, and the image is cropping (as desired).
  <img src="https://i.stack.imgur.com/NQYD9.png" alt="enter image description here"></p>
  
  <p>Here the window is "narrower" than the aspect ratio, but instead of cropping, the image is tiling (undesired).</p>
  
  <p>Here are some thoughts that I had...</p>
  
  <ul>
  <li>Could I change the SVG image in some way to prevent this from happening?</li>
  <li>Could I markup/style the page to achieve the desired results?</li>
  <li>I would prefer to keep in the realm of HTML/CSS, but if Javascript is needed, then so-be-it.</li>
  </ul>
  
  <p>Here's the dabblet that I was working with... <a href="http://dabblet.com/gist/6033198" rel="noreferrer">http://dabblet.com/gist/6033198</a></p>