Simple HTML: Images

Types of Image | Linking Images | Formatting Images
Images as Hyperlinks | Thumbnail Images
Background Images | Where do they come from?

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 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 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 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 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 Images Choose your background image carefully. It needs to contrast with the colours of your text and compliment your overall design.