background-size

Supersize that Background, Please!

contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same. In Example two, we have extended the code from Example one by setting the background-size property to contain.

Cover always fills the browser window, cutting off some hair or ears in the process, which is what I personally prefer for most cases. You can control how your image is aligned within the viewport by using the background-position property. In Example three we have extended Example one again, this time by setting the background-size property to cover.

body {
  background: #000 url(myBackground_1280x960.jpg) »
center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

@media only all and (max-width: 1024px) and (max-height: 768px) {
  body { 
    -moz-background-size: 1024px 768px;
    background-size: 1024px 768px;
  }
}

default: http://www.alistapart.com/d/supersize-that-background-please/index.html
background-size: contain http://www.alistapart.com/d/supersize-that-background-please/index2.html
background-size: cover http://www.alistapart.com/d/supersize-that-background-please/index3.html