title: CSS: Static Background Image to cover any screen size but not exceed image size
body: <p>I want to create a perfect full background image that is static and that fills the viewport, no matter what the size of the screen(viewport) is.</p>
  
  <p>So I use the following CSS:</p>
  
  <pre><code>body, html{
     width: 100%;
     height: 100%;
     background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed;
     margin: 0;
     padding: 0;
     -webkit-background-size: cover;
        -moz-background-size: cover;
          -o-background-size: cover;
             background-size: cover;
  }
  </code></pre>
  
  <p>Now the problem is...As far as I understand, when the viewport size exceeds the size of the image, the image will stretch and will pixelate...</p>
  
  <p>How can I prevent the max size being passed?</p>
  
  <p>Also, what is the best way to approach this screen size problem when you want to cater for retina display resolutions? Set a max-width on the body, html elements?</p>
  
  <p>Thank You</p>