HTML | Background Tiling 		Next

Background Tiling

We now show how to use an image (in GIF or JPEG format) to "tile" the background of your homepage. By this, we mean that the browser takes an image and uses it to cover the background of a page by repeating the image as many times a required. Any text and images displayed on that page then appear against this tiled background.

Here is an example of a subtle tiling with a less subtle message. A well-chosen tiling for the background can greatly enhance the appearance of a page, but the downside is that tiled pages generally take longer for the browser to load.

Obtaining an Image

First, we must get an image suitable for tiling a background. Use the browser to go to the address

http://csep10.phys.utk.edu/webcourse/sampletile.html

Save the image that is displayed in your folder under the default name (a051.jpg).

Tiling Your Homepage Background

Now go to your homepage file (assumed to be in the same folder as the image just stored). Near the top of the file there will be a line 

<BODY BGCOLOR="#000030"  
TEXT="#ff0000" LINK="#00ffff"  
VLINK="#00ffff" ALINK="#FF0000">

Edit this line to insert the text BACKGROUND="a051.jpg" immediately after <BODY so that the line reads 

<BODY BACKGROUND="a051.jpg"
BGCOLOR="#000030" TEXT="#ff0000"
LINK="#00ffff" VLINK="#00ffff"
ALINK="#FF0000">

Notice that the case does not matter for the HTML itself (so background= or BACKGROUND=, or even BaCkGrOuNd= are equivalent), but the files names may be case sensitive, so a051.jpg should be typed exactly as written, in lower case.

Save the changes in the file, and reload your homepage with the browser. You should now have a page with the background tiled by the image you just downloaded.

Experimenting on Your Own

You can experiment with different tilings just by changing BACKGROUND="a051.jpg" to the name of another GIF or JPEG file copied to your folder. Use care however; there is no harm in experimenting, but don't settle on a background that makes it difficult for someone to read your pages. The Web page designer must always walk a fine line between aesthetics and legibility.

Next