Deep Background

The download page for Firefox, showing a detailed background behind the text

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 them. 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 unless the text contrasts strongly with the background.)
  • Color gradients

    Bright, saturated colors are OK, 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 generally are easy to program.)
  • Depth cues

    Fuzzy detail and vertical color gradients are two features that tell our visual systems 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 distracting the viewer from seeing the parts of the page he should look at instead.
Illustrations of two types of focal points: diffuse and strong

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

In this example, four Mac OS background images illustrate the relative difficulties of reading text and icons over complex backgrounds. The first two make it quite hard to distinguish the folders and application shortcuts; the third is easier, and the fourth is the easiest by far. Note the characteristics of these four backgrounds: high versus low contrast with the text, hard versus soft focus, and general “noisiness.”

Four built-in desktop images, showing how they interfere with readability

Some websites make heavy use of textures that lend the whole site a distinctive look. In this example from Ecoki, the textures are everywhere; but because they are lightweight and low-contrast, they don’t interfere with the readability of the text.

Richly textured backgrounds at the Ecoki site

This (rather old) version of the Mercedes-Benz website uses an image as a background. This image has some very strong focal points—the cars, of course—and they are the central features 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 images at the bottom, and the “4MATIC All-Wheel Drive” tag line.

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.

Multi-layered page layout with appropriate backgrounds behind all text elements