[an error occurred while processing this directive]
Go to Bottom Nav - May 23, 2019 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

The body tag has a number of attributes that change the appearance of the page. Here are a few for your fun and enjoyment. These attributes are depricated, but like the font tag, still very useful. These background and color attributes are handled by Cascading Style Sheets in modern browsers.

Background Color

The background color of web pages is often determined by the default of the web browser software or the preferences of the browser user; most ofter white or gray. You may specify the background color of the page by using the bgcolor attribute in the body tag. It looks like this.

<body bgcolor="color_value">

bgcolor stands for background color. The "color_value" is either one of the "friendly" or predefined color names or the color you want expressed in hexadecimal (or hex) values.

The predefined color names (at the bottom of the color chart on the back cover of the HTML 4 for the World Wide Web textbook) are: silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow, and cyan.

The hex value is expressed using six numbers/letters preceded by a "hash" or number symbol (#). The single digits of the number range from zero through the letter "f" since hex numbers are base sixteen. The six numbers are evaluated in pairs: the first pair is the red value, the middle pair is the green value, and the last pair is the blue value. Here are a few examples.

  • <body bgcolor="#000000"> yields a page with a black background
  • <body bgcolor="#ff0000"> yields a page with a bright red background
  • <body bgcolor="#00ff00"> yields a page with a bright green background
  • <body bgcolor="#0000ff"> yields a page with a bright blue background
  • <body bgcolor="#ffffff"> yields a page with a white background

For some help figuring out specific hex values, try some of the links on the resources page.

Background Images

You may use an image in the background of you web page by using the background attribute in the body tag. it looks like this.

<body background="path_to_image_file">

Just as with the src attribute in the img tag, the path to the image file is the value for the background attribute. If the file cannot be found, no background image is shown.

The background image will tile on the page. This means that the image will repeat itself throughout the page behind the text or other elements on the page. Often, the background image has a color or pattern on the left side and a long expanse of white stretching off to the right. This allows a band of color along the left margin of the page and a large expanse of white for the text to lie on. The user would have to have a very large monitor for the image to start repeating on the horizontal plane.

A Netscape bug: A Mac using Netscape 4.x will have difficulties with very small background images. Try and make your tiles larger than 25 pixels on a side.

Happy Together

The bgcolor and background attrubutes work well together. The background image downloads just like any other image; it can be jarring if the background image is very different tonally from the background color. Figrure out the predominate color in your background image and set that as your background color for best results.

Text Colors

If you use darker colors or background images, you will need to change the color of your text and links to make them stand out. Look for contrast between text and background to make it easy to read, not just different colors. To test your choices, set your monitor to show grayscale and no other colors.

Here are the body tag attributes to change the text and link colors. As with the bgcolor attribute "color_value" can be a name or hex number.

  • text="color_value" will specify the color of the text
  • link="color_value" specifies the color of unvisited links
  • alink="color_value" specifies the color if the link you are clicking on
  • vlink="color_value" specifies the color of links you have visited

Here is an example of a body tag that specifies a page with black background, white text, cyan links, red active link, and lime visited links.

<body bgcolor="black" text="white" link="cyan" alink="red" vlink="lime">
See it in action, click here.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu