Backgrounds
There are 5 background properties, and 1 shorthand.
background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand)
The important thing to note about backgrounds is that it doesn't have to apply to
the whole page, as the normal background HTML tag does. You can specify backgrounds in paragraphs, table cells, headers and
almost anything else you want.
background-color and background-image
These two are very straight forward. For background-color the valid
values are colors, be it rgb, hex, or color name, and transparent, which
makes the background transparent.
There are only two values for background-image, none and a url to point
to an image object.
Examples:
P.bg1 { background-color: #000000;}
P.bg2 { background-image: url(images/bg1.gif) }
background-repeat
Valid values are: repeat, repeat-x,
repeat-y, and no-repeat. A value of
repeat, repeats the background horizontally and vertically. repeat-x only
repeats the background in the horizontal direction, repeat-y vertical
direction. And as you might have thought no-repeat does not repeat the
background at all.
Example:
<BODY
style="background-repeat:no-repeat"
background="test.gif">
background-attachment
There are two values for background-attachment, scroll and
fixed. A value of "scroll" is what is common with browsers today. The background
scrolls along as you do. A value of "fixed" will keep the background fixed,
with the text and other goodies scrolling on top of it.
Example:
<BODY
style="background-attachment:fixed"
background="test.gif">
background-position
You can specify where the background is to be placed with this
property. Valid values are: length, percentage,
top, center,
bottom, left,
right.
For example, the below declaration positions the background image at
the lower footnote of the page:
<BODY style="background-position: bottom
right" background="test.gif">
background (shorthand)
Finally, we've stumble upon the shorthand notation for background,
essentially all you need to manipulate the background image using CSS. The
notation combines
background-color, background-image,
background-repeat, background-attachment, and
background-position, in that order.
Here's the classic example that renders a non repeating background
image, centered and fixated on the page:
BODY { background: white url(bg1.gif)
no-repeat fixed center center }
|