Document Backgrounds

Background Images or Tiles

Background images enhance the look and design possibilities of web pages.
These gif files are generally very small and tile across and down the background of the web page. The size of the backgound gif file is important as large files take time to download.

First catch your gif!

If you click on any image with the left hand button of you mouse you can save it to you hard drive or floppy disk. Here's one for you to download for use in the first example. Save it as aus.gif

Background attribute

This attribute specifies a URL pointing to an image file that's used as a background for the document. It always goes in with the body tag
Copy and paste the following example and save it as a text file bground.htm in the same directory where you saved the aus.gif file. Then open it with your browser

<html> <head> <title>Background Image</title> </head> <body background="aus.gif"> <h3>Background Image</h3> see how the image tiles across the page </body> </html>
Below are a number of examples for you to click on and view. Take a look at the source of each one to check the background attribute in the body tag.

Bgcolor

Browsers show the background as grey or white, or you can chose another color in the preferences, but the bgcolor attribute allows web page designers to designate their own preferred background colour. The great advantage of a background colour over a background image is that the browser sets up the colour instantly rather than downloading a gif file.

Type the following example and save it as a text file colour.htm , then open it with your browser

<html> <head> <title>bgcolor Tag</title> <body bgcolor="#9a6a3a"> <h2>gold!</h2> there are a few thousand colours that can be used for backgrounds using the <b>hexadecimal</b> numbering system. You can chose your own colour from the following table of <a href="colours.htm"><b>hexadecimal colours</a> </body> </html>

Text Colour

Another attribute for controlling the look of a page is the text attribute which allows you to designate the colour of the text. The text attribute uses the same format as the bgcolor attribute
The colour of the text becomes particularly important if you use a black background, when the default black text would dissappear! The number for white is #ffffff
Copy and paste the following example and save it as a text file coltext.htm , then open it with your browser

<html> <head> <title>Text Colour</title> <body text="#001d00" bgcolor="#9a6a3a"> <h2>green & gold!</h2> The colour of the text becomes particularly important if you use a black background, when the default black text would dissappear! The number for white is <b>#ffffff</b> </body> </html>

Colour and Links

The text attribute does not affect text that is used for links, however there are 3 more attributes that allow you to do control the 3 colours associated with links depending on whether they have been visited vlink or not or are active alink or not link .

Type the following example and save it as a text file "colink.htm" in the "bgimages" directory, then open it with your browser

<html> <head> <title>Colour for Links</title> <body text="#f0f0f0" link="#ffff00" vlink="#22aa22" alink="#0077ff" bgcolor="#000000"> <h2>black & white</h2> Watch the colours as you click on these links. Notice what happens when you return to this page after following a link. <a href="bg4.html">bg4.html</a><p> <a href="bg6.html">bg6.html</a><p> <a href="bg8.html">bg8.html</a> </body> </html>

Examples of Backgrounds

Return to top of page