Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | 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.


After this lesson you will be able to:


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. But don't take our words for gospel, draw your own conclusions from an example of what happens when you do not think about the impact of a noisy background.

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. No, it is not very exciting, but it is readable.

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 many 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:
  3.     <body bgcolor=#000000>
  4. 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:


where the XXXXXX values will determine:

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


sample web page
This will provide a black background, pale yellow text, light aqua blue hypertext, and red 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=#CC0000>

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=#0000FF>

If you are looking for some examples of background texture files, see the list of links from Yahoo

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 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 #FF66CC ?
  3. How do you color the text of a web page?
  4. What is the difference between
      <body bgcolor=#FFFFFF>
      <body background="tiles.gif">

More Information

If you would like to know that the colors you choose for your web pages will look the same on other computers, consider the hexadecimal codes. With the different combinations of letters and numbers, there are literally millions of colors to choose from, e.g. #FD6A2C, #06E293 or #55A92B. Yet, not all of these colors will be the same on all computers. Moreover, if your visitor does not have a cutting edge computer capable of displaying "millions" of colors, the web browser will make a closest "guess" to match the colors, with perhaps undesirable results.

Fortunately, you can do something about this... only use hex colors that are included in the NetScape 216 color palette. "What is that?" you ask. It is a set of 216 unique colors that are common to the system colors of both Macintosh and Windows operating systems. Therefore, these colors can be displayed on almost any computer.

If you are choosing these magical colors, you just need to choose ones that are triplet combinations of the following color codes: 00 33 66 99 CC FF. For examples, these colors are all part of the cross-platform color set: #FF6600, #00FF66 or #669933.

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

Two of the most hideous and obnoxious HTML tag evers created...

GO TO.... | Lesson Index | previous: "Standard vs Enhanced HTML" | next: "Don't Blink, Don't Marquee" |

Writing HTML: Lesson 16: Colorful and Textured Backgrounds
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

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