Table 8-1. Background Position Property Values
|
Value Type |
Example |
Placement |
|---|---|---|
|
Percentage |
background-position: 0% 0%; |
Top-left corner |
|
background-position: 100% 100%; |
Bottom-right corner |
|
|
background-position: 14% 80%; |
14% across, 80% down |
|
|
Length |
background-position: 20px 20px; |
20px from left, 20px down |
|
Keywords |
background-position: top left; |
|
|
background-position: left top; |
0% 0% |
|
|
background-position: top center; |
||
|
background-position: center top; |
50% 0% |
|
|
background-position: right top; |
||
|
background-position: top right; |
100% 0% |
|
|
background-position: left; |
||
|
background-position: left center; |
||
|
background-position: center left; |
0% 50% |
|
|
background-position: center; |
||
|
background-position: center center; |
50% 50% |
|
|
background-position: right; |
||
|
background-position: right center; |
||
|
background-position: center right; |
100% 50% |
|
|
background-position: bottom left; |
||
|
background-position: left bottom; |
0% 100% |
|
|
background-position: bottom; |
||
|
background-position: bottom center; |
||
|
background-position: center bottom; |
50% 100% |
|
|
background-position: right bottom; |
||
|
background-position: bottom right; |
100% 100% |
Confused yet? So was I, until I started playing around with positioning backgrounds. The important thing to remember is that for percentage and length values, the first value is the horizontal value and the second is the vertical value. With keywords, the behavior is as described in the table.
NOTE
You can combine percentages and length values with background-position but not keywords, so you can have a value of 100% 20px but you cannot have a value of 100% left.
If only one percentage or length value is given, it is applied to the horizontal position, and the vertical position defaults to 50%.
Example 8-5 sets up the style sheet for a sample of each value type.
Example 8-5. Positioning a background graphic with percentage, length, and keywords
h1 {background-image: url(tile.gif); background-repeat: no-repeat; background-position: 0%
0%;}
h2 {background-image: url(tile.gif); background-repeat: no-repeat; background-position:
100px 4px;}
h3 {background-image: url(tile.gif); background-repeat: no-repeat; background-position:
bottom right;}
Note that I've defined not only the image, but also the repeat value of no-repeat, to ensure that the background-positioning values work properly. Figure 8-10 serves up the resulting background graphic positions.
Figure 8-10. The small gray-lined tile being positioned within the background of header elements.
