Tell a friend about this site

Home Page

Next Page

Previous Page

Contents Page

Download tutorial in Zip form

When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

TaFWeb Good Start Award

Brightening Up the Background

You should now be able to brighten up your page a bit with coloured text and images -- but what about the page background? So far we've been content to let the browser decide how the page background will appear.

The easiest change we can make is to colour the background. This is done by adding to the <BODY> tag which each of our pages should now have. For example, if you want a green background to your page, change the <BODY> tag like this:


You can use any of the common colours, but remember that not all users' browers will necessarily be able to display them all. Alternatively you can use the other method of quoting a colour which we discussed in the section on Text Size, Colour and Typeface:


If you change the colour of your background you must be careful that your text, links, etc. are still easily visible. How many web sites have you seen where the background is black and the links are dark blue and almost invisible? I've even seen sites where the only way to read the text is to highlight it with the mouse because the author has used black text on a black background.

To change the colours of the text and the links, we can add more to the <BODY> tag. The example below changes the colours of everything that can be changed:

Click the camera image to see a page set up like this.  Example

The various abbreviations have the following meanings:

BGCOLORThe background colour of the page
TEXTThe text colour (obviously)
LINKThe colour of links which have not yet been visited
ALINKThe colour a link changes to when clicked (the "active" link)
VLINKThe colour of links which have been visited previously

Using an Image as the Page Background

We are not limited to colouring the page background; we can also specify an image to be used. Normally the image will be quite small, and will be repeated across and down the screen until the screen is filled (this is referred to as "tiling" the image). Below is an example of the type of image you might use and the way we would amend the <BODY> tag. Click the camera image to see a page which uses this image as it's background:

<BODY BACKGROUND="bk03.gif">   Background image     Example

You can also use a wider image to get the same sort of effect as I've used on this page. The image I've used looks like this (I've reduced it to a quarter of its actual size and put a border around it so that you can tell it from the page background):

Background strip

Many people use this kind of image as a background, because then you can divide your page into two columns -- a narrow one on the left to contain links to other pages, and a wider one on the right for the actual page content. When you think you understand about changing the page background and using images as a background, go on to the next section about Creating Tables where you will find out, among other things, how to put text into columns.


Top of Page

This page hosted by
Planet Tripod
Get your own
Free Home Page


These pages are copyright © Terry Franks June 2003.
Terry Franks
Last major revision: 22 August 1998 at 02:29 BST
This document URL:
TerryFranks is
a member of

The HTML Writers Guild