Chapter 5
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.