The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Deep Background

From Mac OS/X
What:	Place an image or gradient into the page's background that visually recedes behind the foreground elements.
Use when:	Your page layout has strong visual elements (such as text blocks, groups of controls, or windows), and it isn't very dense or busy. You want the page to look distinctive and attractive; you may have a visual branding strategy in mind. You'd like to use something more interesting than flat white or gray for the page background.
Why:	Backgrounds that have soft focus, color gradients, and other distance cues appear to recede behind the more sharply defined content in front of it. The content thus seems to "float" in front of the background. This pseudo-3D look results in a strong figure/ground effect -- it attracts the viewer's eye to the content. Fancy explanations aside, it just looks good.
How:	Use a background that has one or more of these characteristics: Soft focus. Keep lines fuzzy and avoid too much small detail -- sharp lines interfere with readability of the content atop it, especially if that content is text or small icons. (You can kind of get away with sharp lines if they are low-contrast, but even then, text doesn't work well over them.) Color gradients. Bright, saturated colors are okay, but again, hard lines between them are not. Allow colors to blend into each other. In fact, if you don't have an image to use in the background, you can create a simple color gradient in your favorite drawing tool -- it still looks better than a solid color. (You don't need to store or download pure gradients as images, either. On the Web, you can create them by repeating one-pixel-wide strips, either horizontally or vertically. In systems where you can use code to generate large areas of color, gradients are generally easy to program.) Depth cues. Fuzzy detail and vertical color gradients are two features that tell our visual system about distance. To understand why, imagine a photograph of a hilly landscape -- the farther away something is, the softer and hazier the color is. Other depth cues include texture gradients (features that get smaller as they get farther away) and lines radiating from vanishing points. No strong focal points. The background shouldn't compete with the main content for the user's attention. Diffuse (weak) focal points can work, but make sure they contribute to a balanced composition on the whole page, rather than distract the viewer from seeing the parts of the page they should look at instead. As you design an interface with a deep background, consider what happens when the user changes the size of the page. How will the background accommodate a larger (or smaller) size? Will it rescale to fit, or will the window just clip an unscaled image? Clipping is probably less unsettling to the user; it's how most web pages behave, and it feels more stable. Besides, you don't have to worry about changing aspect ratios, which is problematic with many images.
Examples:
From Netscape 7 The Netscape 7 look-and-feel shows the use of gradient-based sculpturing behind UI controls. The gradient works well with other features -- barely-visible drop shadows, contouring around the "Home" and "Radio" buttons, and even the shading in the etched group box around the Search field and button -- to create a finished "two-and-a-half-D" look.
From the Mercedes-Benz web site This web site uses an image as a background. This image has some very strong focal points -- the cars, of course -- and they are the central feature of the page. But the outer parts of the image, which are much softer, are deep backgrounds for other content: the search box, the four small image at bottom, and the "4MATIC All-Wheel Drive" tagline. The most interesting aspect of this figure is the darker band running down the lefthand side. The site needed a navigation bar with small text, but layering those links directly over the background image wouldn't have worked -- the words may have been unreadable over small detail, and would have gotten lost in the composition. A translucent smoked-glass background highlights those white links by increasing contrast; it balances the page (which otherwise is right-weighted); it doesn't obscure the nice background image; and it adds a sense of layered depth.