Graphics on the Web

Tiled Backgrounds

Tiled backgrounds are special Web graphics used as backgrounds for Web pages. When the BACKGROUND attribute (or property) of a page is set to a GIF or JPEG file, the browser uses the image to fill the page window from edge to edge and top to bottom by repeating or tiling the image.

Some examples:

  1. "Swatch" textured background: ex. 1 | ex. 2
  2. Left-edge. An example
  3. Right-edge: this page (when viewed at screen resolution higher than 800x600)
  4. Left/right combination. An example (screen shot. Site no longer online)
  5. Top-edge. An example
    (The tiled background is used to create a drop shadow effect on the banner graphic.
    Scroll down the page to see the dangers of using a top-edge background on a long page. The tile repeats!)

Avoid using large images like photographs as tiled backgrounds. The results are unpredictable and often look amateurish.

Some important points to remember when creating tiled backgrounds:

  1. Make sure the tile is "seamless," i.e. you can't see the edges of the tile
  2. Make sure that any text on a page with a tiled background is readable

(Netscape only.) To view the background image of a Web page: View > Page Info > Click filename labeled Background Image in top frame > Click file name labeled Location in bottom frame

Graphics Checklist