Value

This property accepts one or two length values, percentages, or keywords.

If only one value is specified for background-position, the second value is assumed to be center. Where two values are used, and at least one is not a keyword, the first value represents the horizontal position, and the second represents the vertical position.

A length value places the top-left corner of the background-image at the exact horizontal and vertical position specified.

Note that when the background-position is defined with a percentage value, that position refers to both the element itself and the corresponding point on the background-image. For example, a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp—using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.

CSS2 didn’t allow us to mix keywords and length values for background-position values. This point was amended in CSS2.1, and it’s now quite valid to specify an image’s background-position as follows:

.example {
  background-position: 200px bottom;
}

That said, in the interests of achieving the greatest browser compatibility, it’s still advisable to avoid mixing keywords and length values. Besides, it’s easier to use the equivalent percentage measurement, like so:

.example {
  background-image: 200px 100%;
}

Specify the horizontal position using one of the following keywords: left, center, or right. To set the vertical position, the following values are used: top, center, and bottom. Unlike length units, keywords don’t have to be kept in a horizontal–vertical order—the browser is able to determine what they refer to—but, for the sake of clarity and consistency, it’s best to keep them in that order.

The horizontal keyword left refers to the left-hand side of the element’s padding box (it corresponds to 0%). If only one keyword is specified, the vertical position equates to 50% (that is, 0% 50% or left center).

The horizontal keyword center refers to the horizontal position in the middle of the element’s padding box (it corresponds to 50%). If only one keyword is specified, the vertical position equates to 50% (that is, 50% 50% or center center).

The horizontal keyword right refers to the right-hand side of the element’s padding box (corresponds to 100%). If only one keyword is specified, the vertical position equates to 50% (that is, 100% 50% or right center).

The vertical keyword top refers to the top of the element’s padding box (it corresponds to 0%). If only one keyword is specified, the horizontal position equates to 50% (that is, 50% 0% or center top).

The vertical keyword center refers to the vertical position in the middle of the element’s padding box (it corresponds to 50%). If only one keyword is specified, the horizontal position equates to 50% (that is, 50% 50% or center center).

The vertical keyword bottom refers to the bottom of the element’s padding box (it corresponds to 100%). If only one keyword is specified, the horizontal position equates to 50% (that is, 50% 100% or center bottom).

The following example illustrates how the keywords refer to their equivalent percentage values:

background-position: left top;      /* same as 0% 0% */
background-position: left center;   /* same as 0% 50% */
background-position: left bottom;   /* same as 0% 100% */

background-position: right top;     /* same as 100% 0% */
background-position: right center;  /* same as 100% 50% */
background-position: right bottom;  /* same as 100% 100% */

background-position: center top;    /* same as 50% 0% */
background-position: center center; /* same as 50% 50% */
background-position: center bottom; /* same as 50% 100% */

Negative length and percentage values are allowed. Their effect is to shift the image’s position outside the confines of the element it’s placed in, although, of course, none of the negative part of the image will be visible. The image will be visible only inside the element itself, even though its starting position may be outside the element.

Compatibility

Internet Explorer versions 6 and 7 will not base a background-position em length value on the parent element’s font-size when that background-image is applied to the body element. Instead, these browsers will act as if the font-size has not been set on the html element. This issue only applies to the body element; other elements on the page remain unaffected.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.