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.