The default background-position value is 0 0 (the
top left of the web page).
Along with keywords (center, left, and right for horizontal positioning; center, top, and
bottom for vertical positioning), you can use percentages and pixel values. It??™s possible to
use a combination of percentages and pixel sizes, but you cannot mix keywords with
either. Therefore, it??™s recommended that designers stick with using percentages and pixel
values??”after all, keyword positioning can be emulated with numbers anyway (left top
being the same as 0 0, for instance). When setting values, they should always be defined in
the order horizontal-vertical.
When using keywords, it??™s also recommended to use the order horizontal-vertical, because
both percentage- and pixel-based background positioning use this order, and it??™s simpler
to remember a single rule. In the following example, the background would be positioned
on the left of the web page and positioned in the vertical center of the content:
body {
background-image: url(background_image.gif);
background-repeat: no-repeat;
background-position: left center;
}
Again, when using percentages or pixel values, the first value relates to the horizontal position
and the second to the vertical. So, to create the equivalent of the keyword example,
you??™d use the following CSS:
body {
background-image: url(background_image.gif);
background-repeat: no-repeat;
background-position: 0 50%;
}
Note, however, when using background-position with the body element, that browsers
disagree slightly on where the background should be positioned vertically if the page
content isn??™t taller than the viewing area.
Pages:
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112