Background Images

You web page, tables (or elements styled with Cascading Style Sheets) can have images instead of plain backgrounds, a bit like wallpaper. Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design. If the image is small it will be tiled (repeated, horizontally and vertically) to fill the background. For the image to "tile" properly the detail in the top edge must match the bottom edge, and the detail in the left edge must match the right edge, or the pattern will not be continuous.

You can use a large image as a background, so that it fills the background, but your image might be too big to fit on some peoples monitors and too small to fill others! Also a large image will have a longer download time.

  • Usually your background image will not be visible when you print a web page. You can override this setting in your printer properties before you print the page.

Good (and Bad) Examples of Images for Backgrounds

  Original Image Tiled Version

Good. The image tiles well and contrasts with the text.

background image example: aqua_shimmer.gif

Background Images

Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design.

Bad. The image does not tile well and the text is lost in the pattern.

background image example: tiger-bg.gif

Background Images

Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design.

Good. The image tiles well and contrasts with the text.

background image example: lilac_ice.gif

Background Images

Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design.

Bad. The image tiles perfectly, but it is impossible to read the text.

background image example: bw-tile-bg.jpg

Background Images

Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design.

You can use a more complicated image, then increase the brightness and reduce the contrast in an image editing programme so that text is easily read on it.

  Original Image Edited Version

In this example the image is not tiled but has deliberately been made the exact size needed for the background.

background image example: pond-lilly.jpg

Background Images

Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design.