Background Color and Textures

Use background attributes in the BODY tag to dress up your pages with color and textures.


Background Color

You may have noticed that most of the pages on the Web have interesting colors on the background, but the files you have created so far are only gray. This exercise is designed to show you how to change this! By default, browsers display black text on a gray background. However you can change this.

Add the following code to your BODY Tag!

BGCOLOR="#AAFFEE"

It should look like this: <BODY BGCOLOR="#AAFFEE">

The six-digit number and letter combinations represent colors by giving the RGB value (Red Green Blue). The six digits are actually three two-digit numbers in sequence, representing the amount of red, green and blue in the color as a hexadecimal value in the range 00 (none) - FF (full). For example:

00 00 00 is black with no colors
FF FF FF is white fully saturated with all colors
FF 00 00 is bright red fully saturated on the red dimension
00 FF 00 is bright green fully saturated on the green dimension
00 00 FF is bright blue fully saturated on the blue dimension

Now try changing the color by playing with the codes for RED, GREEN, BLUE!

You can also use the names of some colors instead of code. Try this:

<BODY BGCOLOR="RED">

These are sixteen predefined colors you can use instead of color codes:
Silver Gray Maroon Green Navy Purple Olive Teal White Black Red Lime Blue Magenta Yellow Cyan

You can see the names and codes of colors you can use here:

http://www.zoran.net/olu/picker_basic.asp
http://www.correlationsystems.com/colors/
http://www.theodora.com/html_colors.html

This information about color will be the same in any context in which you specify color on your pages.

See Background Color Castro p. 102 (alt. p. 98)
See Colors in Hex Castro Appendix C pp. 311-313 (alt. pp. 257-259)

Background Images

Most browsers can load an image and use it as a background when displaying a page. If you do add a background image, be sure you can read your text when displayed on top of the image. Any image that can be displayed using an IMG tag can also be used as a background image. However, most people choose to use tiny images that look like textures (e.g. grass or clouds). This works because the browser will display a background image in a special way called tiling, which means that the browser automatically takes the image and repeats it across and down to fill your browser window. In sum, you generate one image and the browser replicates it enough times to fill your window.Adding a background requires a .gif or .jpeg image and a tag in your html document.

Go to this site and choose a background image (name.gif)
Netscape sample images

Save the selected file to your harddrive in the same location as your web page. Then add the following inside the BODY tag in your page to look like this:

BACKGROUND="filename.gif"

It should look like this:

<BODY BGCOLOR="#AAFFEE" BACKGROUND=filename.gif">

Be sure you have replaced the "filename.gif" with the name of the file you downloaded.

See Background Images Castro p. 103 (alt. p. 99)


Lesley ECOMP 6009   © 1999 Mary Hopper mehopper@world.comUpdated 12/01/99