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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma