background-position (CSS property)

Spec
Inherited Initial Version
No 0% 0% CSS1, 2.1
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

background-position: { { percentage | length | left | center | right }  1 or 2 values | inherit } ;

Description

The background-position property defines the initial position of a background-image. We can repeat the image from this position using the background-repeat property, which will cause the image to be repeated in both directions along the specified axis—see background-repeat.

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

Some area of the element must be visible so that the background-image is able to show through. If the element has no intrinsic height (defined either by its content or by its dimensions), there will be no space in which the background can be seen. Similarly, if an element contains only floated children that haven’t been cleared—see clear—there will be no background to show, as the element’s height will be zero.

If no background-position has been specified, the image is placed at the default top-left position of the element (0,0), which is located within the top-left corner of the element, just inside the border at the outside edge of the padding box.

The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.

Example

This style rule places a background-image at a position that’s 100 pixels from the left and 200 pixels from the top of the element with ID "example" :

#example{
  background-position: 100px 200px;
}

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.

Note: background-position and background-attachment

If the background-image has been placed using a fixed background-attachment value, the background-position refers to the viewport, rather than the element’s padding box.

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 Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

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.

In Internet Explorer for Windows version 8 a background-position with a value of top when used on an inline element in conjunction with vertical-aligntop is incorrectly calculated when its sibling is an inline IMG element with a greater line-box height (bug documented by James Hopkins).

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

User-contributed notes

ID:
#7
Contributed:
by Fabien72
Date:
Mon, 13 Sep 2010 14:17:47 GMT

> .example {
background-position: 200px bottom;
}
> Besides, it’s easier to use the equivalent percentage measurement, like so:
> .example {
background-image: 200px 100%;
}

I think there is a typo here : "background-image: 200px 100%" should be "background-position: 200px 100%"

ID:
#5
Contributed:
by Louis Lazaris
Date:
Fri, 05 Feb 2010 09:25:55 GMT

In the compatibility chart, IE6 and IE7 are said to have "full" compatibility with this property, however, immediately following the chart, a bug is described that affects those versions of IE. So, shouldn't the chart say "buggy" for those as well?

Related Products