So You Want To Work With Backgrounds

    It has been my experience that even in the early stages, people want to get involved with the appearance of the backgrounds in their pages. People like working with colors and images as a backdrop for their message. I decided therefore to provide the basic information for doing this.

    Remember that there is a <body> tag in every HTML document, or there should be. Remember also there there can be only one <body> tag. If you insert more than one <body> tag, only the very first will be honored.

    Background Color

    The <body> tag can be expanded with what is called "attributes." To change the color of the background, you insert a "bgcolor" attribute as follows:

    <body bgcolor="nnnnnn">

    where the n's must be replaced with numerals 0,3,6,8,9, or letters C or F.

    • <body bgcolor="ffffff"> will provide a white background and
    • <body bgcolor="000000"> will provide a black background.

    Grouped in two digits, these numerals control the mix of Red, Green, Blue. Caveat: both digits of a color must be the same, so 245673 is not really a color that the web can understand. Colors therefore must look like this: 003366. These are the only colors that are considered "browser safe" or "web safe."

    If you insert a color that is not acceptable, the browser will "figure out" what the nearest intensity of the color is. for example, instead of 24 in the Red, the browser will show 33 in the Red. The end result of using non-browser safe colors can be disastrous. The browser with "dither" the colors, producing horizontal banding or other anomaly of color. 

    For a complete view of all the permissible colors and their codes, click here.

     

    Now this is the barest of things here, and to understand it, you must work with things you have not considered before - but it is an adventure.

    To begin with, if you change the background color, you may render certain things invisible. In extreme form, suppose you changed the background color to black. Then you could not read the text, which is also black. So readability is an important issue when working with colors.

    Let's start with the fact that certain color combinations are not advisable. Many are color blind, and producing red text on a green background can cause some a lot of grief. Garish colors in the background, such as bright purple, can also produce such negative results that people won't want to read your pages.

    Whatever color you pick, the text should be in a color which has sufficient contrast to make it easy to read. Dark grey text on black background is very hard to read, so it is annoying to the reader. This author has seen several pages designed by real "designers" which are offensive to the viewer in this respect.

    It is clear then that when you manipulate background colors, you may also want to change text colors, and there are several kinds of text colors that you need to look at.

    • Text (normally black) - this is controlled by the text="#nnnnnn" attribute"
    • Links (normally blue underlined) - this is controlled by the link="#nnnnnn" attribute.
    • Visited Links (normally ???> - this is controlled by the vlink="#nnnnnn" attribute

    So a "body tag" could look like this:

    <body bgcolor="#000000" text="#00ff00" link="#ff0000 vlink="#0000ff">

    to say the least.

    There are a total of 256 colors to choose from. To know them all by number is asking a bit much. So the colors all have been given names! You can then use the names instead of the numbers. So, for example, you can use bgcolor="black" and text="white" to obtain white text on black background. the basic colors will work as expected - red, blue, purple, yellow, green, orange, cyan, magenta, chartreuse, teal, acqua to name a few. The names of the colors however themselves can grow be a challenge.

    Although this discussion has been in the context of setting background colors for the entire body of the page, the same rules apply to table cells. You can add any of these attributes within a cell of a table to control colors of that cell. For example,

    <table border=8>
    <tr>
    <td bgcolor="red" text="white">Left Cell
    <td bgcolor="cyan" text="red">Right Cell
    </table>

    Will produce a table with two cells - one of them with a red background, the other with a cyan background, as follows:



    Left Cell
    		Right Cell

    Background Images - By Popular Demand

    Any image which the browser can show can be used as a background image. That is to say, one can use any .GIF or and .JPG file. Once again, you use the body tag to accomplish this. The syntax is as follows:

    <body background="image.gif">

    The image will be used to tile the background of the page. Remember however that text will be flowing over the image. This means that color considerations discussed above are still important. If the background image is dark, you should be careful to set the text color light, so that the text is visible.

    A backgound image should not therefore contain both light and dark colors. Otherwise some of your text will not be readable. The colors should be uniformly light or uniformly dark. You can use image editing software to create this effect in an image which has high contrast.

    Caution: HTML tags are not themselves case sensitive. However, when you name the background image, remember that many host systems are case sensitive.