by Janette B.
Bradley
axsWave Software, Inc.™
There are 2 ways to get background colors on your web page:
- Use a hexadecimal code to specify a color on your page.
- Use a background GIF or JPEG.
If you want to define a color other than the deafault gray, you need to use the hexadecimal code for that particular color in the body tag. Below is a list of some of the basic colors. One thing to be very careful about when using any background color is the variations in hardware. The perfect blue on one monitor may not be the same on another. For more in-depth information on these type of issues, check out the article on Hardware & Software for the Web. Use the Back button on your browser to return to this tip sheet.
- White: #ffffff
- Black: #000000
- Red: #ff0000
- Green: #00ff00
- Blue: #0000ff
- Gold: #ff9c05
- Dark Green: #006600
- Yellow:#ffff00
Some HTML page editors like Adobe Pagemill have some of the basic colors predefined for easy use.
The # tells the browser that what follows is a hexadecimal number. Divide the total number into 3 parts with 2 digits in each part. The parts then specifies the amount of Red, Green, or Blue (RGB color) the final color will have.
To set background color, set the background color within the BODY tag. To set background color, use BGCOLOR= in the BODY Tag.
BODY BGCOLOR="#ffffff" --will produce a page with a white background
If you change your background color, redefine your text color in the BODY tag to insure readability. The numbers used for text colors are the same as those used for background colors.
Choose a color that provides sufficient contrast between text and background to be readable. For example, black for background, light blue for text.
To set your text color, use TEXT= in the BODY Tag.
BODY BGCOLOR="#ffffff" TEXT="#0000ff" --will produce a page with a white background & blue text.
HTML 3.x aware browsers allow you to set the color of selected parts of your text. If you are viewing this page with the latest versions of Netscape or MS Explorer, all the titles appear in blue. To set selected text to a different color use the COLOR= in the FONT tag:
FONT COLOR="#0000AF"
You may also need to change your link colors, particularly if you have set the background to the same color as the links. Do this in the BODY tag as well. There are three kinds of link colors that can be defined.
LINK - a link that has never been clicked on.
ALINK - a link that the user is holding the mouse down on.
VLINK - a link that has already been clicked on.
See the next section for an example
Set all the colors for a page in the BODY Tag
BODY BGCOLOR="#ffffff" TEXT="#0000ff" LINK="#ff9c05" ALINK="#006600" VLINK= "#ff0000"
Thus we have a WHITE background with
- Bright BLUE Text,
- GOLD Links that have not been visited,
- GREEN Active Links, and
- RED Visted Links.
A white background is the most readable.
Use a black backround only to express a particular mood or theme, it can make the text very hard to read.
Click here to look at a page using these tags
A background GIF or JPEG is a picture that the browser tiles across the Web page. If you use a small image, it will repeat over the whole page to cover the page, no matter how large the window is made. Be careful about file size for your backgrounds. Large background files slow loading time. Also be aware that JPEG defined background files my look very bad if someone's monitor is set to 256 colors or less. Always test both your JPEG and GIF backgrounds on 256 colors. You might also want to check it out when your monitor is set to only 16 colors. Because I do a lot of consulting in academic environments, I regularly run across 16 color machines, many are not capable of displaying the backgrounds on many web pages. Knowing your audience will help you decide what type of background, if any, is best.
You can use a background image to:
- place a particular color for your page
- put a pattern across your page
- set up blocks of colors on your page
- set a particular mood that a solid color cannot create.
The most improtant thing to remeber is to check your background on different monitors and platforms. What is readable on one machine may not be readable on another. For more in-depth information on these type of issues, check out the article on Hardware & Software for the Web.
Background GIF or JPEGs are defined in the BODY tag. Define it as BACKGROUND. Each of the following samples also shows the BODY tag that is used to define the page.
Chose light background GIF or JPEGs and/or ones with very small images
Unless you really know what you're doing graphically, be careful of bright colors and bold images.
Feel free to contact me with questions or to talk about how the axsWave Software team can help you with your Web site:
Janette B. Bradley (janette@metronet.com)