HTML and CSS Reference
In-Depth Information
■
<length>
: A fixed length for the offset from the upper-left corner.
■
<percentage>
: A percentage offset relative to the difference between
the size of the container's content area and the size of the image;
width is relative to (width of container area minus the width of
background-image
), resulting in a value of
50%
being centered and
100%
touching the right edge.
■
top
: Equivalent of
0%
for the vertical position.
■
right
: Equivalent of
100%
for the horizontal position.
■
bottom
: Equivalent of
100%
for the vertical position.
■
left
: Equivalent of
0%
for the horizontal position.
■
center
: Equivalent to
50%
for either position.
A
background-position
of
0%
0%
is the default (the equivalent of left top).
note
When defining the
background-position
property, it is best to use the
same unit type (
<length>
,
<percentage>
,
<keyword>
) for both the hori-
zontal and vertical values. Mixing unit types may yield unpredictable results.
The CSS3 specification adds the ability to use pairs of values where the
first of the pairing describes the edge measured and the second the
offset length or percentage from that edge. At the time of this writing,
however, no major browsers support the offset syntax.
background-position: right 50px bottom 10px; /* positioned
50px from right edge and 10px from bottom edge */
background
(Shorthand)
The
background
shorthand property allows for assigning the indi-
vidual background properties (
background-color
,
background-image
,
