Question

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.

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.

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;
}

Answer 1

Instead of

background-size: cover;

you will want to use

background-size: 100% auto;

Cover will stretch the image to the smallest size such that both its width and its height can fit inside the content area, hence your issue. See more about that over here.