Large, illustrative background images appear to be the trend in web design this year. Links in recent articles here have provided some examples: thesixtyone and youarelistening.to (from “Music to Code By”), along with sites like Flipboard and Ben The Bodyguard.

If you decide to go down this particular design route, there are a few points to keep in mind:

• Full-screen, high quality images tend to be associated with large file sizes. You will likely need to balance this with other demands on your page.

• Do some research on average screen sizes before committing to a resolution for your background image. The best solution would be to study stats from an existing site by using analysis software such as Google Analytics; alternatively, you could look into (less accurate) overall trends. As of March 2011, I would recommend an image resolution 1024 × 768 or 1200 × 800 as a broad rule.

• Remember that mobile devices count too! You may want to use an @media query to load in a 320 × 480 background image for mobile devices as an alternative to the large image that you will load for screens.

• Everything else being equal, a high resolution image dynamically scaled down will tend to look better than a low resolution image scaled up; if possible, err on the side of caution and use a higher-resolution image for your background.

• As a general rule, do not write CSS to change the aspect ratio of the background image in response to the browser being resized; that is, do not attempt to fill the entire background with the image. This means that you will have to choose a background-color to fill the space where the image is not present.

• Keep in mind standard rules in regards to background images: you want content on top of the image to be legible and easily seen.

With those conditions in mind, the CSS do make the background dynamic is very easy; it's a CSS3 draft property called background-size.

You have several choices when it comes to background-size for the body: setting the property to cover will dynamically scale the background image such that it always scales to whatever dimension is largest (height or width of the browser window). The one downside of this is that the cover property is not supported by older browsers (circa 2009 or earlier). Setting it to 100% (representing width) might be a better solution for older browsers. Whatever solution you choose, you should define background-color as a fill color for areas not covered by the image.

For the example to follow, I have used an HDR image of San Marco Square by Luca Moglia, licensed under Creative Commons. Given the following HTML code:

1. <div id=stmark">
2. <h1>Piazza San Marco</h1>
3. <p>Piazza San Marco (often known in English as St Mark’s
4. Square), is the principal public square of Venice. “The Piazza” forms
5. the social, religious and political centre of Venice…</p>
6. </div>

Apply the following CSS:

1. body, html { min-height: 100%; }
2. body { color: white;
3. background: url(st-marks-square.jpg) centre no-repeat;
4. -moz-background-size: cover;
5. -o-background-size: cover;
6. -webkit-background-size: cover;
7. background-size: cover;
8. background-color: #444; }
9. div#stmark { width: 40%; background: rgba(0,0,0,0.6);
10. border: 5px double white; margin: 3em; padding: 2em 2em 0 2em;
11. float: right; line-height: 155%;
12. font-family: Cochin, "Times New Roman", Times, serif; }
13. div#stmark h1 { margin-top: 0; }

The result will be a background image behind the content that will rescale to the size of the browser window.