HTML and CSS Reference
In-Depth Information
Listing 5-15.
Adding a
background-position
declaration
.intro {
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: right bottom;
}
Figure 5-25 shows the result—the image appears in the element's bottom-right corner (we've added some
padding and a border so you can see the box).
Figure 5-25.
The image now appears in the bottom-right corner (and still doesn't repeat)
You can specify a value for
background-position
in a few ways: keywords, lengths, and percentages.
The keywords to use are
left
,
center
, or
right
for the horizontal position and
top
,
center
, or
bottom
for the vertical. Note that you can use the keyword
center
for either horizontal or vertical positioning;
vertically,
center
is half the element's height, and horizontally,
center
is half the element's width.
A
length
is simply any number with any unit of measure available, such as 10px, 20mm, or 3.5em, and the
two values needn't use the same unit. A unit isn't required for lengths of 0. After all,
0px
is the same as
0in
or
0em
—zero is always zero. Listing 5-16 shows two lengths for the
background-position
property,
placing the image 50 pixels from the left and 4 em spaces from the top.
Listing 5-16.
Using lengths for
background-position
.intro {
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position:
50px 4em
;
}
Figure 5-26 shows the rendered result, with the image positioned 50 pixels from the left side and 4 ems
from the top, just as declared in the CSS.
