Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

16. Colorful and Textured Backgrounds

Do not settle for that drab old grey page! Put a bold c o L O r or textured pattern behind the text.

Objectives

After this lesson you will be able to:

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

The background of your page should be just that -- in the background. As we add different colors or even patterns, keep in mind that it should not interfere with the readability of text. For the pages of this tutorial, we have used a solid white color that makes for a clean and non-interfering (even if not dramatic) backdrop.

With some modifications to the <body> tag (introduced way back in lesson 1), you can add a solid color background to your web page. But before we show you how to do the fancy color stuff, we must first talk about RGB color values and their "hexadecimal" representation.

"Hex-Dec" and Color Basics

In a web browser, you have at your disposal 256 system colors to color text and backgrounds. Each color is identified by its Red- Green- Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets.

Here is the tricky part. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue.

Here are some hexadecimal examples of different colors:

ColorHex Code         ColorHex Code
xx oo xx FFCCCC         xx oo xx 3300FF
xx oo xx 33FF66         xx oo xx AA0000
xx oo xx 663300         xx oo xx 9900FF
xx oo xx 000077         xx oo xx FFFF00
xx oo xx EEEEEE         xx oo xx 888888
xx oo xx 444444         xx oo xx 000000
Now, don't panic about having do a bunch of numerical conversions! There are many tools that will let you click on a color and they will provide the hexadecimal representation. Many color tools are available from those folks at Yahoo.

But better yet, many browsers support standard shorthands for these 16 colors (those Windows VGA favorites):

ColorName         ColorName
xx oo xx aqua         xx oo xx black
xx oo xx blue         xx oo xx fuchsia
xx oo xx gray         xx oo xx green
xx oo xx lime         xx oo xx maroon
xx oo xx navy         xx oo xx olive
xx oo xx purple         xx oo xx red
xx oo xx silver         xx oo xx teal
xx oo xx white         xx oo xx yellow

Solid Color Backgrounds

NOTE: You may want to first try a test to see if your browser supports solid color backgrounds.
For our Volcano Web, the first thing we will do is add a color background to the index.html file. The HTML format for adding a solid color background involves modifying the <body> tag to read:
    <body bgcolor=#XXXXXX>
where XXXXXX is the hexadecimal representation (indicated by the # sign in front of it) of the desired color.

If you recall, the image we use for the opening has pictures of volcanoes on a black background -- so if we were to use the same black color for the background of the web page, the picture would merge well into our page:

  1. Open the index.html file in your text editor.
  2. Find the <body> tag and change it to:
        <body bgcolor=#000000>
  3. Save and Load your HTML file in your web browser
If you did things correctly, your browser should have changed the background to a solid black. But you may have noticed that you cannot see your text! Why? Well, the default color for text is also black, so you now have black text on a black background! Fortunately, we have some other options to add to the body tag to color the text and the hypertext items:
    <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>
where the XXXXXX values will determine:

You can now add some of these other color values by changing the tag to read:

  <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88>
This will provide a black background, pale yellow text, light aqua blue hypertext, and green hypertext to visited links.
NOTE: the order of the items in the <BODY> tag does not matter
You should now modify the <BODY> tags in all of your HTML files (fast and easy to do by copying and pasting the above example for the new <body> tag).

Textured Backgrounds

NOTE: You may want to first try a test to see if your browser supports textured backgrounds.
Solid colors add some variety to web pages -- but you can go even farther by adding a textured background. You use a small image file (GIF or JPEG) and the browser will "tile" the web page with repeated copies of the image. Some of the things you should keep in mind are: In this part of the lesson, we will give you a chance to experiment with three different background images. The HTML format for adding a background image file is:
  <body background="bgfile.gif">
where bgfile.gif is the name of the image file (this can be a full URL or a relative file path -- see lesson 8a).

Below we list the names of three background files. You can download each one (if you do not know how to download graphics from a web page, please refer to our help sheet). You should put each graphic file in your pictures folder/directory in your web workspace:

Blue Tile [bg.gif]
A square repeating pattern:
HTML: <body background="../pictures/bg.gif">
Example file with the Blue Tile background

Volcano Text [vtext.gif]
Light grey large text:
HTML: <body background="../pictures/vtext.gif">
Example file with the Volcano Text background

Legal Paper [paper.gif]
Long strip of notebook paper
HTML: <body background="../pictures/paper.gif">
Example file with the Legal Paper background
You can also modify the text colors for your page as we did in the above example. For example, if we want RED text for the Legal Paper background, we might write this HTML:
  <body background="../pictures/paper.gif" text=#AA0000>
which gives us red text on yellow paper.
NOTE: Many web browsers have the ability to change the default text colors -- sometimes a user may have the preferences set for colors that will interfere with the ones you have selected. Therefore, we suggest when using any background tags (solid color or texture file) that you include the "normal" colors -- black for text, blue for hypertext links, and purple for recent links:
  <BODY TEXT=#000000 VLINK=#660099 LINK=#0000EE>
If you are looking for some examples of background texture files, see Kai's Power Tips Background Archives

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. We are going to keep the sample files with the solid black colors that we added in the early part of this lesson.

Review

Review topics for this lesson:
  1. How do you add a solid color background to your web page?
  2. Why are the color codes written in cryptic code like #EE66CC ?
  3. How do you color the text of a web page?
  4. What is the difference between
      <body bgcolor=#FFFFFF>
    and
      <body background="tiles.gif">
    ?

Independent Practice

Add a solid color background or a texture file background to your web page(s). Ask some other people if they find that the text is suitably readable with the background elements you have chosen.

Coming Next....

The most hated and obnoxious HTML tag ever...
GO TO.... | Lesson Index | back: "Standard vs Enhanced HTML" | next: "Don't Blink" |

Writing HTML Lesson 16: Colorful and Textured Backgrounds
©1995, 1996, 1997 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut16.html