background-position

This property’s values set the origin of the background by using two values that relate to
the horizontal and vertical position. 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. Internet Explorer and Safari assume the body is
the full view area height when there’s no content, thereby setting an image with a
background-position value of 50% 50% directly in the center of the viewing area. Firefox
and Opera instead assume the body has an effective height of 0, thereby placing the background
vertically at the top of the view area (in fact, you only see the bottom half). For
consistency across browsers in this case, you can define both background-position and
background-attachment (as fixed), although this means the background will not scroll
with the page content.