HTML and CSS Reference
Listing 5-15. Adding a background-position declaration
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
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.