ou can make your site more visually interesting by putting color, texture, or images in the background of your page. You can also select colors for text, links, and visited links. These features are all elements you can control and are part of your site’s design.
The basic method of setting page-wide background and color values is through attributes in the body tag:
Browsers are set to use their own default colors?typically a gray background, black text, blue links, and purple visited links. Unless you specify otherwise in your HTML file, these are the colors which your page will display. Pretty 1994, eh?
You may, however, specify backgrounds, background colors, and link colors with the
tag. Remember, a start body tag goes at the beginning of your page’s content; an ending body tag goes at the end of your file. Everything between the start and end body tags appears in the web browser.The body tag does two things:
- Tells the browser that everything between the start body tag at the beginning of the file and the end body tag at the end of the file is part of the displayable page.
- Sets various page-wide values, which override the default browser values.
This is the body tag for the page you are reading right now:
You can see the result it produces — an off-white background, black text, and a chocolate color for both links and visited links.
Body Tag Attributes- background. Puts an image in the background of the page.
- bgcolor. Sets a color for the background of the page.
- text. Sets a color for the body text.
- link. Sets a color for linked text.
- vlink. Sets a color for “visited links”?that is, for linked text that you have already clicked on.
Sometimes people use a small image and tile it. This means the same small image repeats over and over again.
Sometimes people use a larger image that will fill the entire background of the browser window.
The background image is part of your site design. You don’t need to use one, but if you do be sure that it matches your overall tone and style and that your text is readable overtop the image.
You set a background image through the background attribute in the body tag. The value of the attribute is the URL of the image you want to use. For example, this code:
displays the image “little-saturn.gif” in the background of the page. The image will tile to fill the entire background of the reader’s broswer window.
The URL of the image should always be in quotes. It should also be an image that lives on your own server. It isn’t nice to link to a graphic that is on someone else’s site?and besides, they might delete or change the file without you knowing about it.
Background ColorYou set a background color through the bg attribute in the body tag. The value of the attribute is a color value. For example, this code:
Sets a black background. So does this:
Both the word “black” and the hex code “#000000” are values for the color black. If you use the color name, it should be in quotes. If you use the hex value it needn’t be in quotes, but it should begin with the # symbol.
If you are using a background image, you background color should be similar in hue to the dominant color in the image. And if you aren’t using a background image, be sure the background color enhances — not hinders! — the readability of your text.
Text and Link ColorsYou set a text color through the text attribute in the body tag. The value of the attribute is a color value. For example, this code:
produces red text on a black background.
Link Colorproduces chocolate-colored links. Instead of appearing the the same color as the rest of the text or in the default blue, the links are a nice goldeny-brown.
Visited Link Colorproduces chocolate-colored links. Visited links appear in a white, the color value represented by the hex value #ffffff.
Some people argue that you should never change the default colors for links and visited links. We don’t agree. What is important, however, is that your link and visited link colors are consistent. People will learn pretty quickly that your links are limegreen?so keep them limegreen throughout the section or the site.
Design NotesSome suggestions for good background image choices:
- Select an image that won’t be distracting. Make sure that people won’t be looking at you background and ignoring your content.
- Select an image that isn’t too busy. If you have an image with many small pieces and lots of detail, it will be difficult to read any text you place over it.
- Select an image that isn’t too bright. No matter what color text you select, it will be overwhelmed by a vivid background image.
- Select an image that will tile the way you want. All images tile. If you want a single image to fill the broswer window background, be sure you give some thought to how the image will look if the reader’s window is sized larger or smaller than you are desiging for.
- Select an image of reasonable file size. A sure way to annoy your readers is to have them wait and wait for a large background image to download.
- Select an image that is compatible with the text color you are using. For example, don’t place an image with darkbrown tones under a page that is using brown text?you’ll only end up with a muddy glob that no one can read
- Select a background color that is close to the main color of your background image. That way, if readers have their image loading option turned off, they will still see a color that is compatible with your type.
- Select a background color that meshes with your text color and supports the content of your site. For example, photos might stand out well against a black background, but it can be painful to read pages and pages of small white text.
And a good overall rule of thumb: when in doubt, keep it simple. Having a legible page is far more cool than having a fancy background that hides half the text and is impossible to use.
