A List Apart

Menu
Issue № 309

Supersize that Background, Please!

by Published in Browsers, CSS · 48 Comments

With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code (Line wraps marked » —Ed.):

body {
  background: #000 url(myBackground_1280x960.jpg) »  
center center fixed no-repeat;
}
Article Continues Below

Example one shows a centered background image of 1280 by 960 pixels that is fixed to the viewing area (it doesn’t scroll with the document).

But which image size will be big enough? Monitors and operating systems have evolved quickly, and as a result there is a wide range of available screen resolutions. The most popular resolutions today are 1024x768px, 1280x800px, 1280x1024px, and 1440x900px. However, with the advent of HD screens (1920x1080px) and professional displays that support resolutions up to 2560x1600px, almost anything is possible.

There is also a case to be made for lower resolutions. Many people resize their browser window to fill up a percentage of their screen, while a range of modern screens only support an 800x600px resolution. And that leaves a lot of lower-spec handhelds out of the equation.

Instead of using one fixed background size, a better solution would be to scale the image to make it fit within different window sizes. Unfortunately, CSS 2.1 has no means of scaling background images.

There are a couple of workarounds, however these all rely on the HTML img element (instead of CSS backgrounds). They also use absolute positioning for layering and tables or scripting to enable resizing. Additionally, not all of these techniques preserve the image’s ratio, which results in unrealistically stretched backgrounds.

CSS3 backgrounds to the rescue

The W3C CSS Background and Borders Module Level 3 (currently a working draft) defines the background-size property that fits our requirements. Interesting values (to cite the W3C specs) are:

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.

You enable background scaling by adding the following declarations to your stylesheet:

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

The background-size property is already supported by Firefox 3.6 (using the -moz prefix; Firefox 4 will use the regular CSS3 property), Chrome 5, Safari 5, and Opera 10.54; and it will be included in Internet Explorer 9 (it’s already available in Preview 3). Older Webkit and Opera versions already support the background-size property, however these implementations are based on a previous draft which did not include the contain and cover keywords.

The downside of this method is that there is no background property available to set a minimum width or height. When one resizes the browser window to a very small width or height, the background image will rescale to a very small size, an often-undesired behavior.

Adding CSS3 media queries to the mix

The W3C CSS3 Media Queries Module (a candidate recommendation) defines conditional rules that only apply within certain width or height ranges. This enables us to implement background scaling from a minimal width and height and on. Media queries are supported by Firefox 3.5, Chrome, Safari 3, and Opera 7, and will also be included in Internet Explorer 9.

By adding the following style rules we tell the browser that we don’t want a background image to scale smaller than 1024x768 pixels:

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

Note that 1024x768px has the same ratio as the background image (1280x960px). When using a different ratio you will get sudden jumps in scaling when resizing your browser window.

In our final examples, four and five, we have added the @media rule, so that our background image doesn’t scale smaller than 1024 by 768 pixels. Example five shows that by setting the background-position property to left-bottom instead of center-center, we can control the way the background image is aligned within the viewport.

Revisiting old techniques

These are exciting times for web developers, with all the browser makers working hard to implement upcoming technologies like HTML5 and CSS3. As a result, it’s time to start revisiting old techniques to see how the same things can be done in smarter, cleaner ways. While the upgrade cycles of Firefox, Chrome, Safari, and Opera are relatively short, it will be interesting to see how quickly people embrace Internet Explorer 9, so we can start using many of these new techniques on a large scale soon.

48 Reader Comments

Load Comments