• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Web Design Techniques > Backgrounds


One very popular HTML function involves filling the background of a Web page with a pattern or image. A lot of Web sites use this trick in one form or the other—it is part of the standard repertoire for any Web designer. There is a catch to using the background function, however. Since the background image is repeated in the browser by default, the same image will display again when the viewer scrolls down or to the right. From the chart, you can see that you may need to make your background image 1,280 pixels wide and at least 1,024 pixels high to ensure that users with larger monitors won’t see the repetition. However, because this creates a lot of unnecessary overhead, many designers limit their background images to 800 pixels in width or, even better, they use Cascading Style Sheets. Since Cascading Style Sheets are able to limit the number of repetitions for a background image, the image doesn’t have to be very large. If you wanted to have just a small image in the upper-left corner that fades into the background color of the browser, you could use Cascading Style Sheets to reformat the BODY tag and have the background image be repeated only once. Instead of creating an 800-by-800-pixel image, you would need only a 200-by-200-pixel image, a savings of more than 93 percent (working with Cascading Style Sheets is explained in the GoLive chapter).

The Jazz Central Station Web site (www.jazzcentralstation.com) uses a sidebar background as the main design element. A dimmed logo in the main area creates a certain richness and depth when it is later combined with the content.

Monitor Sizes and their Resolutions (Width × Height)

640×480800×600832×6241024×7681152×870 (Mac)
 (SuperVGA)  1152×1124
 82×624 (Mac)  1280×1024

Using Large Background Images

Andreas Lindström, who created the Web site for Carnegie Hall, has his own special way of using backgrounds in his Web designs. He likes to use dimmed images that blend with the background color, combining them with smaller images in the foreground. This creates an interesting dynamic and lends depth to the Web site. Here’s how to dim an image and have it blend with the background:

For the Carnegie Hall Web site, Andreas Lindström used a background image (above) and placed the other elements such as text and images on top of it.

Put the image on its own layer. If your background is already on its own layer, skip this step. Otherwise, create a new layer by clicking on the New Layer icon at the bottom of the Layers palette. Fill this layer with the background color that you want to use, then use the Layer > New > Layer from Background command to make this layer the new background layer.

Use the Opacity slider in the Layers palette to dim your image. However, if you want to make sure that text on top of it will be readable, dimming alone will not guarantee that the background color and the image will blend together sufficiently. Try applying a blending mode to the layer: Multiply, Soft Light, Hard Light, or Luminosity work very well. Another nice effect is to blur the image with Gaussian blur—done to the extreme, this can create a great background texture. But even a little blurring helps to improve the readability of any text. If you want your image be monochromatic, use Image > Adjustments > Hue/Saturation and activate the Colorize option. This allows you to change the hue and saturation.

Very often you will also want to blend the edges of your image layer with the background color. This is done by applying a layer mask to the layer (Layer > Add Layer Mask > Reveal All) and using the Airbrush tool with a black foreground color to paint into the layer mask. All the dark areas of the layer mask will be transparent. Use a large brush size with soft edges, and make sure that the layer mask is activated when you paint into the image; otherwise, you will paint over it.

Sidebar Backgrounds

Using a sidebar is still a very popular design concept and all you have to do is color one side of the background. Since the background image is repeated, it can be as small as one pixel in height, resulting in a very small file size.

Using a one-pixel image is a bit extreme, of course, and doing this does have a hidden drawback: It requires a lot of processing power on your visitor’s computer, because the browser has to render the background every time the user changes the window size or scrolls quickly down a page. With a background image just one pixel high (and, for example, 800 pixels wide), the browser has to repeat the background more often—while this may not be noticeable on today’s computers, that extra demand can slow down the browser on an older, low-end machine. Using a pattern with a height of 40 pixels is less demanding. If you use textures and save the image as a JPEG, use a dimension that is divisible by 8 because the JPEG compression algorithm works with 8-by-8-pixel blocks.

Here’s how to create a simple sidebar: Create a new document via File > New and enter, for example, 40 pixels for height and 800 pixels for width. Click the foreground color field in the toolbox and choose a foreground color from the color picker then use the Rectangle tool to create a rectangle in the left-hand part of the image. Then choose File > Save For Web. Since images like this are ideally saved as GIFs, choose a color depth of three bits in the Save For Web dialog box. If you need to change the color, just double click the Shape Layer icon in the Layers palette.

Creating a unicolor sidebar is done by drawing a Shape layer.

Although the sidebar in the example above is easy to create, it may look rather technical; a sidebar with texture can contribute significantly to the design. To avoid unwanted visible breaks at the edges, the upper and lower edges of the image should fit seamlessly.

Here’s how to create a sidebar with texture:

Create a new document and place a background or texture on the left side of the image. Choose the Offset filter (Filter > Other > Offset).

When using a texture in the sidebar the edges need to be made seamless. This is done by using the Offset filter and the Stamp tool.

For Vertical: Pixels Down, enter half the height of the sidebar and activate the Wrap Around option. This ensures that image elements that disappear at the bottom will reappear at the top. Check the Preview option to see the effect before clicking OK.

Now remove the edge in the image. Depending on the image itself, either the Smudge tool or the Rubber Stamp tool will be most appropriate. Generally, the Rubber Stamp tool is more suitable for retouching. With the Option (Mac) or Alt (Windows) key pressed, click on the image region you want to use as a source. Release the key and click in the image where you want to fill in the information you’ve just picked up. As you move the tool around, you will see a cross following your movement; it marks the spot that you clicked on the first time while holding the Option/Alt key. To get the best results, you will have to change this point frequently; otherwise, you will still see an edge.

After the image has been smoothed out to create a seamless transition, use the Offset filter to convert the image file back to normal. (Enter a negative value and use the Wrap Around option.) The exported image will appear in Navigator or Explorer as one big background.

Texture Backgrounds (Wallpaper)

Using texture backgrounds can sometime make text difficult to read, but there are a lot of good examples of Web sites where designers avoided this by using textures with subtle colors. You will also want to use a pattern that’s large enough to make the continuous repetition less obvious. There are two ways to create a seamlessly tiling background: One is the “old” way, where the edges are touched up with the Stamp Tool; the “new” way is with the Pattern Maker. Since the old way gives you a little bit more control over the outcome, let’s start there first.

Sidebars don’t necessarily have to be boring. In this example the logo and the buttons extend the white stripe from the background. This breaks up the repetitiveness of the background texture.

This Web site by Christopher Stashuk is a good example of a subtle background pattern that complements the design.

Load a file with a texture, and use the Crop tool to select the region that you’d like to use (crop by double-clicking inside the selection). Open the Offset filter and enter approximately half the pixel size of the image in the vertical and horizontal boxes. Activate the Wrap Around option to make sure moved image elements reappear on the opposite end.

In the center of the picture, you will now see the image break in the shape of a cross. It needs to be removed with the Rubber Stamp tool (or, in some cases, with the Smudge tool). Hold down the Option (Mac) or Alt (Windows) key, and click on the image spot you want to use as a source. Release the Option/Alt key and paint over the image break (a copy of the source area will be used). You might have to constantly change the source for the Rubber Stamp tool to get the result you want, but in the end you should have an area that shows no more edges. You can use the Offset filter one more time to doublecheck that there are really no more visible edges, or you can just move the pattern into its original position by entering a negative offset with the same values that you used before.

Creating Textures With The Pattern Maker

Photoshop also offers a feature to create patterns from selections automatically. The Pattern Maker feature is not intended to be an alternative to the technique explained before. Rather than just blending the edges of a selection to make them appear seamless when they’re tiled, it rearranges the pixels in a selection into a completely new pattern. Pattern Maker lets you produce textures that look very organic. For example, if you design a Web site with a stone texture background, you might want to create buttons or other elements that blend right in.

After you create a texture with the Pattern Maker you can use this texture to fill a selection and then prepare it like you would any other pattern.

To work with the Pattern Maker, open an image and choose Filter > Pattern Maker. With the selection tool in the upper-right corner make a selection of the area that you would like to use as the basis for the pattern. You want to use an area that has subtle color changes, or the results will not be usable as a background (although there are some exceptions to this rule). There are a couple of key values that determine the outcome: Image Size, Smoothness, and Sample Detail. The default setting for the image size is 128 by 128 pixels. It might seem logical to have the image size be approximately the size of the selection, but there is truly no benefit to making the image size smaller, since the tiling can easily become noticeable. There is also no need to change the Smoothness slider unless you see edges within the created pattern. In that case, increase the Smoothness to 3, and the next pattern you create will have less prominent edges. If your selection contains details that are cut up in the pattern, increase the Sample Detail slider to the approximate size of the detail.

Finally, click Generate and the Pattern Maker will fill the area with the pattern. Keep clicking the Generate button until you see a pattern that you like, then click the disk icon to save the pattern permanently. Photoshop stores up to 20 patterns automatically. You can flip through them using the arrow key.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint