HTML and CSS Reference
In-Depth Information
the element's width and/or height. he possible values are repeat , no-repeat ,
repeat-x , repeat-y , and inherit . he default is repeat .
A designer can achieve interesting efects with repeating patterns. For
example, a page featuring a gradient background that is light at the top of
the page, gradually getting darker toward the bottom, can be created with an
image that is only 1 pixel wide by specifying a background-repeat value of
repeat-x .
he background-position property controls where the background image is
initially positioned with respect to the element. Authors can provide a value to
this property in three diferent ways:
1 Using the keywords left , center , or right , and top or bottom , to position
the background image with respect to the let, right, top, and bottom
edges of the element. Positioning the background image with respect
to the center of the container keeps the center of the background image
ixed to the center of the container even as the containing element is
dynamically resized.
2 Using a pair of percentages specifying relative ofsets from the top-let
corner of the element. If only one number is provided, it is taken as the
horizontal ofset, and the vertical ofset is set to 50%.
3 Using a pair of lengths specifying an absolute horizontal and vertical of-
set from the top-let corner. Negative numbers are permitted and cause
the background image to be shited outside the element's boundaries and
clipped.
Following are some examples of the background-position property. Note
that no comma separates the pair of values:
background-position: bottom center;
background-position: 0px 20px;
background-position: 50% 50%;
he inal background property, background-attachment , controls how
the background image moves in response to the scrolling of the foreground
content. he three possible values are scroll , fixed , and inherit . he default
value, scroll , means that the background image scrolls with the foreground
content. he fixed value means that the background image is ixed in place
with respect to the document's window. his alignment is maintained for all
scrolled elements, not just the document body.
 
Search WWH ::




Custom Search