Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
These properties are used to display background images or colors behind other elements.
background-color
Sets the background color. Values may be:
A color name. See Section 6.2, “Specifying colors”.
transparent to make the
background transparent, so it displays
whatever is behind it.
background-image
Displays an image as the background. Use the url() function to select the image; see
Section 6.4, “Universal resource identifiers (URIs)”.
background-repeat
When you use a background image and the image is not large enough to fill the space, the default behavior is to tile the image, that is, to repeat it in rows and columns.
You can control what happens in this case by
setting the background-repeat
property to one of these values:
repeat: This gets you the default
behavior.
repeat-x: If you use this value, the
image will be repeated horizontally, but not
vertically.
repeat-y: The image will be repeated
vertically, but not horizontally.
no-repeat: The image will not be
repeated at all.
background-attachment
By default, when you scroll a page, the background image
scrolls along with the content. To change that, set the
background-attachment property to
one of these values:
scroll: this is the default behavior.
fixed: the background stays in the
same position in the browser window, as the the
content scrolls.
background-position
Normally, a background image is positioned in the
top left corner of the page. To change that, set the
background-position property to
two values from this list; the
first value sets the x (horizontal) position, and
the second the y (vertical) position:
Use a dimension (see Section 6.1, “Dimensions”) to specify the offset from the edge of the page: this is the distance from the left side for the x position and the distance from the top for the y position.
Use a number followed by a percent sign (%) to specify how far the image is shifted
relative to the top left corner. A value of 0% aligns the image at the top or left edge;
a value of 100% aligns the right or
bottom of the image with the right or bottom of the
page; and other percentages are placed linearly
between these extremes.
center: If used for the x position,
the image is centered horizontally; for the y
position, it is centered vertically.
left: This value should be used only
for the x position. It has the effect of moving the
image all the way to the left.
right: Moves the image all the way to
the right.
top: This value should be used only
for the y position. It has the effect of moving the
image all the way up.
bottom: This value should be used only
for the y position. It has the effect of moving the
image all the way down.
For example, this rule
body { background-position: 50% 0.5in; }
would center the image horizontally, and move it down half an inch from the top edge.
background
You can specify all of the above properties in a
single rule with the background
property. The list of values for the property can
include any of the values shown above for
background-color,
background-image,
background-repeat,
background-attachment, or
background-position.
For example:
body { background: 50% 0.5in scroll repeat-y maroon
url(http://clip-arf.dog/schnauzer.gif); }