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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com