Webwork
/
Web Page Backgrounds
In addition to specifying background color, web page authors can specify an image to use as a background.
rivets
A background can be a small image designed to seamlessly tile itself over the page (as in the "rivets" image used here) or it can be a huge image that completely fills the page.

Backgrounds can be added to any of the tags that we've covered so far.

Some examples:

CSS:
body {
background-image: url('grain.gif');
}
Web page:
rivets
By default, background images tile both horizontally and vertically.
body {
background-image: url('metal-bands.gif');
background-repeat: repeat-x;
background-position: right top;
}
metal-bands
Repeat-x tiles the image along the x (horizontal) axis.
body {
background-image: url('metal-bands.gif');
background-repeat: repeat-y;
background-position: right top;
}
metal-bands
Repeat-y tiles the image along the y (vertical) axis.

"Shorthand" example:

body {
background: #ffffbb url('caution.gif') repeat-y left top;
}
caution
CSS "shorthand" combines all of the above, plus background color, into a single, more efficient, tag.

Background images should be used with care for two reasons:

  1. They can significantly slow download time
  2. No matter how subtle backgrounds are, they almost always impair reading text.
Previous | Webwork Table of Contents | Next >