Click to skip over navigation

lecture menu

virtual lectures

handout

lecture intro

image applications I

image applications II

acquiring images

preparing images

accessibility

backgrounds you are here

a break

FTP programs

common mishaps

choosing options

conclusion

  

lecture 5: backgrounds

<< previous slide

return to lesson 5 index

next slide >>

Images can also be used as backgrounds, as you can see here. This is done with style sheet properties and can be done for either the whole page or for individual page elements such as paragraphs or table cells. If done for the whole page, the style information goes with the <body> tag. The <body> for this page looks like this:


<body style="background-image: url(badgeback.gif);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: 50% 20%;">

background-image points to the image file, as should be obvious. What the other three properties do is less obvious. There is more information on the page on background images in the online teaching materials. Realise though that without these other properties the whole background of this page would be covered in "tiled" versions of this image (and you can see an example of this on that page).

Not all images make good backgrounds - in fact comparatively few do. Which of the following do you think will make good backgrounds, and which bad?

1.

2.

3.

4.

5.

Image: sample background one (Earth)Image: sample background two (bars)Image: sample background three (blue)Image: sample background four (flag of Bolivia)Image: sample background five (orange)

Please remember the following guidelines:

  • the worst backgrounds of all are those against which text cannot be read. This applies to most standard images, which contain many different colours. "Busy" images should be reduced to a watermark, as this club badge has been: at worst they should not be used for backgrounds at all.
  • if background images are tiled, they should tile well. Like bathroom tiles they should fit together well at the edges.
  • don't use a background image to impart information. They cannot contain alt attributes, for one thing. Keep them as what the name suggests: background decoration (like background music in a film: helpful for atmosphere, but little more)

Having said all that they can be effective if used well, and this particularly applies if they are restricted to small parts of the page, e.g. individual paragraphs or table cells. You can also get some good creative effects with them. The "vertical rules" which appear on most pages of this site are done with a background, set up to repeat only vertically (via the background-repeat property).

The answer to the question posed above, by the way, was that numbers 3 and 5 would make for good backgrounds, at least for a whole page. The others would be bad for one or more reasons. Examples of most of these in place can be found on the relevant page in the online teaching materials.



<< previous slide

return to lesson 5 index

next slide >>