CSS background-position Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The background-position CSS property sets the initial position (i.e. origin) of the element's background-image. It is often more convenient to use the shorthand background property.
The following table summarizes the usages context and the version history of this property.
| Default value: | 0% 0% |
|---|---|
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | CSS 1, 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the background-position property in action.
Example
Try this code »p {
background-image: url("images/smiley.png");
background-position: 50% center;
}Note: If only one value is specified, the second value is assumed to be center. If 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.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
bottom |
Equivalent to 100% for the vertical position. |
center |
Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is. |
left |
Equivalent to 0% for the horizontal position. |
right |
Equivalent to 100% for the horizontal position. |
top |
Equivalent to 0% for the vertical position. |
| length | Actual pixel lengths. For example, with a value pair of '10px 20px', the upper left corner of the image is placed 10px to the right and 20px below the upper left corner of the element's box. |
| percentage | A percent of the element size. For example, with a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the element's box. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element background-position property. |
Browser Compatibility
The background-position property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Background, CSS3 Background.
Related properties: background, background-attachment, background-color, background-clip, background-image, background-origin, background-repeat, background-size.
