title: css background image resize width crop height
body: <p>I am using this code from css tips and tricks to cover a background image. The problem is that it rescales the image to fit both width and height and changes the aspect ratio. I want the background image to rescale to full screen width and then crop the height only (starting from the top of the image, not the center) to cover the view port. In this way, the image aspect ratio will be maintained.</p>
  
  <p>A secondary problem I have is that it doesn't seem to work unless I use the FQDN for the image instead of just the url below.</p>
  
  <pre><code>html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  </code></pre>