HTML Basics: Backgrounds and Colors

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:


Backgrounds, Colors, and 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:

  1. 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.
  2. 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
The tag has five commonly-used attributes:

  1. background. Puts an image in the background of the page.
  2. bgcolor. Sets a color for the background of the page.
  3. text. Sets a color for the body text.
  4. link. Sets a color for linked text.
  5. vlink. Sets a color for “visited links”?that is, for linked text that you have already clicked on.
Background Images and Colors


Background Images
You can place a background image into your Web page. All the text and other content appears atop of this image.

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 Color
You can tell the browser to use a specfic color for the background of your Web page. This is a very low-bandwidth way of adding a little personality to your pages. As with background images, be sure the color doesn’t overwhelm the rest of your content.

You 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 Colors


Text Color
You can tell the browser to use a specfic color for the text in your Web page. This can be an effective, low-bandwith technique, espeically when combined with a complemtary background color.

You 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 Color
The link attribute sets the color for your linked text. For example:

produces 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 Color
The vlink attribute sets the color for links which have already been visited. For example:

produces 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 NotesYour selection of background, text, and link colors are both a technical action that you accomplish though the body tag?and a design decision. Too many people overlook the design decision component and end up with a detail-filled background with green text and magenta links. Why? Because they could! As you can imagine, readers will quickly flee from these nasuea-inducing pages.

Background Images
The background attribute lets you select an image to use as your background. It’s important to remember that selecting a background image is not the same as selecting an image that nestles into your page amongst other content.

Some 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
Interaction of Background Image and Background Color
Using a background image doesn’t mean you should ignore background color. Remember, not everyone has graphics turned on. Some readers may be trying to view your page without the background image loaded.

  • 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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: