The Web is littered with bad Web page backgrounds. You've probably seen them — Web pages with black text on a dull gray background or, even worse, pages featuring text against a paisley backdrop. They can cause Web surfers many an eyestrain-induced headache.
There's no excuse for a poor choice of background, because it's so easy to set a nice background color or pattern on your Web page. The following simple instructions, will show you how to create effective backgrounds.
Background Color
Let's begin with setting your background color. Every basic HTML document has a <BODY> tag. If you don't specify a background color within this tag, the color that others will see when they view your page will depend on the default background color on their browsers (often, this is the dreaded gray background).
To set the background color, you need to add an "attribute" to the <BODY> tag in your document. The attribute in this case is BGCOLOR. In HTML, colors are best specified by a "hexadecimal code" of six numbers and/or letters. Each color has its own unique code. (Some basic colors — like red, white, and blue — can be specified by name instead of by code. But those colors differ from browser to browser, so it's probably safer to use the hexadecimal code. An in-depth table of hexadecimal color codes is available at EarthLink's Web site for your usage.
As an example, let's look at the HTML code for a page with a white background. The hexadecimal designation for white is FFFFFF:
It's that simple. A page with the above BGCOLOR attribute setting will display a white background on all browsers. If you change the hexadecimal code to 000000, the background will be black, and so on.
Background Patterns
If you'd rather have your background filled with a graphical pattern, the process is almost as simple. You will need to find an image pattern, preferably in GIF format (JPEG images can also be used). Though any GIF or JPEG will work, try to pick one that will look good AND keep your text readable. You can create your own pattern graphic if you have an image-editing program, or you can grab one from the Web.
Suppose you've found a good background pattern image (we'll call it background.gif). This time we'll be adding a different attribute to the <BODY> tag: the BACKGROUND attribute. Here's how the HTML looks:
When you specify an image file for the BACKGROUND attribute, most Web browsers will automatically repeat the image until it fills the entire browser window. This means you can use a very small image file to fill your entire background (reducing the download time of your page).
Text and Link Color
You're almost finished. Now you need to make sure your text and hyperlink colors are readable over the background you've created. (For instance, blue text wouldn't read very well on a blue background.) The HTML coding for these colors follows the same principle as background colors, except that you will be adding three more attributes: TEXT, LINK, and VLINK. (The VLINK attribute specifies the color that links change to once they've been visited and is just as important a design element as your initial LINK color.) For example, the <BODY> tag for a page with a white background, black text, red links, and blue visited links would read: <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="0000FF">
A page with a background pattern, black text, blue links, and red visited links would look like this: <BODY BACKGROUND="background.gif" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000">
The lesson here is simple. Be considerate to people who have traveled far and wide on the Web to land on your page. Don't use a background pattern or color just because you like it; think about how it will look to your audience and how the background can enhance, rather than hinder, the browsing experience.