Vermont Educational Telecommunications Consortium

Background Images and Colors

The BODY tag has several additions that let you add color and images to your web pages. As with many features of the web, browsers may display the results differently. If you decide to use colors it is extremely important to view those pages on several d ifferent computers--when it comnes to colors the variations can be enormous!

Background and Text Colors

Background colors are those that will appear as the background to your entire page. You can also set the color of the regular text, the linked text, and the text for links that have been followed.

Set the color for your page using the tag BGCOLOR="XXXXXX" where XXXXXX is one of the sixteen colors from the original Windows VGA palette or a 6-digit hexadecimal code. For example:
<BODY BGCOLOR="yellow"> would result in a solid yellow (very yellow!) background. Or, you can use the hexadecimal method. For example: <BODY BGCOLOR="#FFFFCC">: will result in the pale yellow that this page is set with.
Note the pound sign (#) before the hexadecimal code.

You can also set text colors using a similar tag. For example, to set a white background with black text, green links, and pink for links that have followed, and maroon for the link as you click on it, you would include this tag:
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="green" VLINK="FFCCCC" ALINK="maroon">:

The 16 colors are:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

Hexadecimal codes for many more colors can be found at a number of sites across the web. Some of these are:

http://www.dcn.davis.ca.us/~webworks/colorchart.html - Doug Jacobson has prepared a chart that shows hundreds of colors and their hexadecimal codes.

http://www.baylor.edu/baylor/Misc/colors/Background.html - a very large (slow!) page with hundreds of color swatches/

You can also find information about colors, including some pages that let you pick from a palete and then display the results, by visiting your favorite search site and searching on the keywords: HTML background color.

Background Images

The BACKGROUND tag allows an image to replicate itself to fill the background of your page. Since the image fills the entire page, regardless of the screen size, you can use very small images. For example, if you click on the following gif image you will see a page that uses this image as a background.

Any image that you create and save as a GIF or JPEG image, or any image you find across the web, can be used for a background. There are a number of ways to find images and several collections designed specifically for backgrounds are also available. Use your favorite search site and search on the keywords: HTML background image.

Once you find an image, you can link to it, or you may wish to save a copy. To make a copy, point to the image and click the right mouse button (in Windows) or hold down the mouse button (in Macintosh). A pop-up menu will appear. Choose the item that lets you "Save the Image" and save it to your disk as you would any file. Move the file to your web account (see: Using WS_FTP for Windows or Using Fetch for Macintosh). Be sure to move it as a binary file!

Now you can include the file name in the tag. For example, if my background image file was named flowers.gif, my BODY tag would be:

<BODY BACKGROUND="flowers.gif">

"Borrowing" Background Images

The method for copying images described above works well if you can point and click on the image itself. However, if you find a page with a background and you would like to use that same background there is a bit more involved. You must be able to find an d point to the actual image that is generating that background. To do so:
  1. go to the page that has the background you want to copy
  2. choose "View: Source" from the menu
  3. look for the <BODY BACKGROUND=> tag
  4. select and copy the name of the image
  5. at the web page, paste the image name to the end of the URL (in the "location" or "go to" box) and press <enter>
  6. this should take you to the image itself
  7. point to the image and proceed as described above, making a copy, moving it to your web account and including it in the BODY tag
That's it!

Go to Macintosh TutorialGo to Windows Tutorial Go to the beginning of the Web Tutorials

© Vermont Educational Telecommunications Consortium, Inc.
E-mail: webmaster@vetc.vsc.edu

Updated by: Hope Greenberg
July 10, 1996.