Backgrounds and Color

Background Colors

<html>
<head>
<title> [title] </title>
</head>
<body bgcolor="#336699">
[...content of web page]
</body>
</html>

bgcolor="#336699" This attribute will make the background of your web page a shade of blue. You can make the color a real supported name or RGB / HEX value. Supported names are: black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver, and teal.

When coding your web page, you should always specify the bgcolor, even if you want it to be white, or a background image. This is because people like me set the backgrounds of their windows to a color other then white, such as gray (easy on the eyes), so if I was to view your web page, and you wanted me to see a white background, but didn't set your bgcolor, then I would see my default gray background instead.

The reason you would set it even if you had a background image tile is in case your image simply didn't show up. If you had a dark image tile in the background, and you logically made your text a light color, it would be a problem if that dark image didn't show up for some reason, and the background was white.

Background Images

<html>
<head>
<title> [title] </title>
</head>
<body bgcolor="#000000" background="parts/fish.gif">
<basefont color="#FFFFFF" face="verdana, tahoma" size="2">
<h3>Fish!</h3>
Wee!! Fishy in the background!
</basefont>
</body>
</html>

bgcolor="#000000" Just as a precaution I have set the background color to black. That way, I won't be in trouble if the image isn't working for someone.
background="parts/fish.gif" I have set the background to an image of a few fish, that is located in a folder called "parts".

To see what that code would look like in action, click here.

Setting More Colors In The Body Tag

<body text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">

text="#rrggbb" When you specify the text attribute in the body tag, you can ensure that all the text in your document will be whatever color you specify. This can be overridden by the <font>, and <basefont> tag.
link="..." This will set the color of all the links in your document. By default, they are blue.
vlink="..." This will set the color of all visited links, by default they are purple.
alink="..." This will set the color of all the active links, or links currently being viewed, by default they too are purple. The alink attribute is Netscape specific.

You can set these attributes in your body tag however you like, in whatever order you like. You do not have to have all of them. If you only want to specify the color of visited links, then that's fine. Your regular links will just be blue.

How To Translate RGB Values Into Hexadecimal
Occasionally you will have this lovely color picked out that you would like to use, but all you know about the color is its RGB value.

For example, lets say you wanted to use this lovely dark blue shade, but all you knew was that its RGB (Red, Green, Blue) values were:
R=52, G=46, and B=112
You can't just type <body bgcolor="R=52 G=46 B=112">. So, you need to translate the values into a 6-digit hexadecimal, (or base-16) number.

First, you need to take the R value, 52 in this case, and divide it by 16, which will make 3.25. The 3 part will be the first digit in our hexadecimal code. To get the second, we will need to take the .25 and times it by 16, which will give us 4. So, the first two digits are 34, and to get the rest you simply need to repeat the process in RGB order until you have all 6 digits.

But, sometimes, you'll get integers that are double digits like 11 and 15, which you can't use. That's where the letters come in. 10=A, 11=B, 12=C, 13=D, 14=E, and 15=F.

Now that we know that, we can complete the equation.
G=46, 46 ÷ 16 = 2.875, and .875 x 16 = 14, and 14 = E, so now we have 342E
B=112, 112 ÷ 16 = 7.0, and .0 x 16 = 0, so the last part is 70, making our complete hexadecimal code #342E70

Here are a few more examples:

R=46 G=112 B=49
R=46 46 ÷ 16 = 2.875  |  .875 x 16 = 14  |  14 = E ; 2E
G=112 112 ÷ 16 = 7.0  |  .0 x 16 = 0 ; 70
B=49 49 ÷ 16 = 3.0625  |  .0625 x 16 = 1 ; 31
Hex = #2E7031

R=18 G=61 B=58
R=18 18 ÷ 16 = 1.125  |  .125 x 16 = 2 ; 12
G=61 61 ÷ 16 = 3.8125  |  .8125 x = 13  |  13 = D ; 3D
B=58 58 ÷ 16 = 3.625  |  .625 x 16 = 10  |  10 = A ; 3A
Hex = #123D3A

Main?