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 a small image and uses it to cover the background of a page by repeating the image as many times as required. Any text and images displayed on that page then appear against this tiled background.

The page you are presently viewing is tiled with a subtle, off-white image that gives the appearance of bond paper. If you are using the frames version of the Tutorial, the frames surrounding the main frame give another example of tiling, this time with an image that gives the impression of blue sky. Here is an example of 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. When using tiling, one should also pay attention to legibility issues. Although tiling the background with a loud color may attract attention, it may also make the text sitting on that background difficult to read.

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 all 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 that you just downloaded.

Experimenting on Your Own

You can experiment with different tilings 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   Back   Top   Home   Help