Preparing Backgrounds

I admit that I have mixed feelings about backgrounds on web pages. These can really add personality to a website, but they also can make reading the text of your site difficult and frustrating. To quote web designer David Siegel, "Gift-wrap makes poor stationery."

That said, however, if you use backgrounds with discretion, they can add to a site's presence and look. Because HTML includes the capability to tile any image as a background, your background file can be quite small. You just have to make sure that it doesn't have obvious edges or pictures that end abruptly, unless that's what you want. In Figure 24.6, I've created a tile for a web page background, and I'm saving it as a GIF using the Save For Web dialog box in Photoshop.

Figure 24.6. This tile combines several filters applied to a plain white background.

To convert the single tile into a background is easy. You simply open a page in your favorite web page layout program, and import the image. Depending on the program, you might import it as an image and click a check box in the dialog box to make it a background. Some other web page layout programs have a specific dialog box for placing backgrounds. Figure 24.7 shows how to insert a background image tile using HTML Assistant.

Figure 24.7. There are no options for background tiles; all you have to do is specify the location of the image file you want to use as a background.

Now, all you have to do is to be sure that when you upload your page to the Web, the background image is where you said it would be. Figure 24.8 shows the tiled background with some type placed over it.

Figure 24.8. The background looks even, and the tiling hardly shows at all.

Here's a trick for placing a stripe down one side of your page. Make a single tile that's a little wider than the width of the screen by as few pixels high as needed. Place your color and/or texture on its left side, and then save it as a GIF or JPEG. The file will probably look something like Figure 24.9.

Figure 24.9. When you design your HTML page, make sure you indent the text from the left margin so that it's not over the dark stripe.

When you place this file as a background, it will be tiled vertically but not horizontally, because it's already as wide as the screen. You'll end up with a nice stripe, as wide as you care to make it, in the color and texture of your choice. It makes a good accent for a plain page, especially if you then place buttons on it.