B.6. background-position

By default, an element's background image (assigned with the background-image property) is aligned so that its top and left edges are flush with the top and left edges of the element (including any padding), respectively. With the background-position property, you can assign a different position for the image.

Inherited: No

See also: Section B.5background-image

B.6.1. Value

One position specifier, or two position specifiers separated by a space.

Each of the position specifiers may be a CSS length measurement (pixels, points, ems, etc.), a percentage, or one of the constants from Table B-1.

Table B-1. background-position constants

Vertical	Horizontal
top, center, bottom	left, center, right

If you specify only one measurement or percentage, it applies to the horizontal position; the vertical position of the image will default to 50%. If you specify two measurements or percentages, the first specifies the horizontal position, the second specifies the vertical. Negative measurements/percentages are allowed, but are rarely useful.

If you specify only one constant, the other dimension defaults to center. The order of constants is not significant.

You can mix length measurement types and percentages (i.e. specify vertical position in one format, horizontal in another). You cannot mix lengths/percentages with constants, however.

Percentages and constants differ from length measurements in the way they position the image. In an element 500 pixels wide, a horizontal position of center or 50% will center the image within the horizontal area of the element. A horizontal position of 250px, however (or any equivalent length measurement), positions the left edge of the image exactly 250 pixels from the left edge of the element.

Initial value: 0 0

B.6.2. Compatibility

CSS Version: 2

Works in Internet Explorer 4 or later, Netscape 6 or later, Opera, and Mozilla browsers.

Setting a non-default value for this property in Internet Explorer 4 for Windows reveals a bug in that browser's support of background-repeat. See the Section B.8 compatibility section of background-repeat for details.

B.6.3. Examples

In this style rule, the background image is centered in the element area:

body {
  background-position: center;
}

In both of these style rules, the background image is placed flush against the bottom-right corner of the element:

body {
  background-position: 100% 100%;
}

body {
   background-position: bottom right;
}

In this style rule, the background image's left edge will be positioned 20 pixels from the left of the element, and the image will be centered vertically:

body {
  background-position: 20px;
}

In this style rule, the background image's top edge is 20 pixels from the top of the element, and the image will be centered horizontally across the element's width:

body {
  background-position: 50% 20px;
}

The following style rule is illegal, as it mixes a length measurement with a constant:

body {
  background-position: 20px center; /* This is illegal! */
}