Image Files | 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 as required. Any text and images displayed on that page then appear against this tiled background.

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