Web Page Design

27 July 2000

Notice the background to this page: it's not a single color, but rather a texture. In fact, it's a graphic -- a JPEG -- repeated many times (a "tiled" graphic).

That's done with a code similar to <body bgcolor="#FFFFFF"> -- it's <body background="../../chalk.jpg"> (you can see it if you check the source for this page).

Any graphic (in GIF or JPEG format) can be turned into a document background: just specify it in the header. But note that many graphics make lousy backgrounds for real pages. Have a look at lousy background for an example.

The best images to use for backgrounds are specifically designed for that purpose: little tiles that provide textures, but not much more. Here are a few samples -- not tiled, but presented singly; you have to use your imagination:

   

There are plenty of collections of free graphics out there on the Web; here's one called Absolute Background Textures Archive.

You can also use a simple pictorial image, provided that you use a graphics package to lighten it up. Here's a piece of a Hogarth print, with the colors changed to make it reddish, and then lightened up enough to make the text readable. Even the bad background above can be made bearable (if still not very good) by lightening it up: see, for instance, this version.

You have to lighten it up using another means of specifying colors: not RGB (for red-green-blue), but HSB (for hue-saturation-brightness). I'll cover that in class today.

Always be careful in choosing background graphics: the files should be as small as possible. Big files take a long time to download. A good background graphic should usually be no more than 5K or so.