Webwork
/
Web Page Backgrounds
In addition to specifying background color, web page authors can specify an image to use as a background.
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');
}
background-image: url('grain.gif');
}
Web page:
By default, background images tile both horizontally and vertically.
body {
background-image: url('metal-bands.gif');
background-repeat: repeat-x;
background-position: right top;
}
background-image: url('metal-bands.gif');
background-repeat: repeat-x;
background-position: right top;
}
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;
}
background-image: url('metal-bands.gif');
background-repeat: repeat-y;
background-position: right top;
}
Repeat-y tiles the image along the y (vertical) axis.
"Shorthand" example:
body {
background: #ffffbb url('caution.gif') repeat-y left top;
}
background: #ffffbb url('caution.gif') repeat-y left top;
}
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:
- They can significantly slow download time
- No matter how subtle backgrounds are, they almost always impair reading text.