Web Colors and Backgrounds
Part of How Do They Do That With HTML? by Carl Tashian

Colors on the web are tricky. First of all, they're usually represented as six digit hexadecimal numbers. These six digits are divided into three sets of two digits, each set representing the amount of red, green, and blue, respectively. Programmers love to confuse things this way. Instead of saying, "I want a web page with a blue background," you must say, "I want a web page with a #0000CC background."

To further confuse things, only 216 of the 16.7 million possible colors are "web safe" and will look approximately the same on all computers. So when you choose colors for a web page, try to stick with web safe colors if you can.

How to do it:

OK, lets look at how these colors fit into the HTML code for a page. Here's a snippet of HTML from the page you're reading right now:

<TITLE>Web Colors and Backgrounds</TITLE>
<BODY bgcolor="#FFFFFF" text="#000000" link="#0000CC" vlink="#660066">

See the colors? The bgcolor (white) sets the background color of the page, text (black) is the color of the text, link (blue) is the color of any links on the page, and vlink (purple) is the color of links that have been visited already.

In order to get these color settings to work on most web browsers, don't forget to end your HTML document properly:


Here are some other uses of color:

<FONT color="#0099CC">Blue-Green text</FONT>
<FONT color="#660000">Dark Red text</FONT>
<TABLE border=0 cellpadding=5>
    <TD bgcolor="#00CC00">Green Table Cell</TD>
Green Table Cell

The system is nice once you get used to it. If you're feeling really lazy and don't want to look up a particular color, you can try using the name of the color instead of its hexadecimal value. But your options are limited to colors you can name.

<FONT color="red">Red text</FONT>

I recently looked at 20 or 30 background graphic archives on the Internet, and here are some typical examples of background graphics I found:

OK, something's wrong here. You don't need an masters degree in Fine Arts to know that these just won't work as background graphics. (hey, I don't have one) Self-important graphics like these are Kings of the anti-subtle. Click on any of them to see for yourself--it's laughable.

The background should stay in the background.

Now that I've said that, here are my tips for background graphics:

Enough background etiquette, lets do this...

How to do it:

Remember how we put colors into the <BODY> tag earlier? The filename for a background graphic goes there too:

<BODY background="background.gif" bgcolor="#FFFFFF" text="#000000" link="#0000CC" vlink="#660066">

If you provide both a bgcolor and a background in the <BODY> tag, the background color will be shown until the background graphic finishes loading.

Non-scrolling Backgrounds:

You can also have the foreground of your page scroll while the background stays still. Just specify bgproperties="fixed" after the background="filename" in the <BODY> tag.

Non-tiled Backgrounds:

Lets say you have a large background graphic (large in dimensions, not file size), and you want to keep it from being tiled on your page. The easiest thing to do is to start with a very big graphic. Make it wider than most people's screen width (at least 2000 pixels wide), and taller than any of the web pages you'll make with it. This may turn out to be very tall, in which case some web browsers could choke on the file, and you're out of luck unless you use a non-scrolling background graphic (as discussed directly above). Anyway, this new graphic should have the same background color as your intended background graphic. Once you have the file created, copy and paste the background graphic you originally had into the upper-left hand corner of the big graphic you just created. This is your actual background graphic. It shouldn't be much larger than the original file you had, because blank space doesn't "cost" much in terms of file size.


[ return to front page ]

Reproduction of material from this page without written permission is strictly prohibited
Copyright © 1995-2001 Carl Tashian