CSS background-position

The CSS background-position property is used to position a background image.

Syntax

background-position: <position> [ , <position> ]*

Where

<position> = [
  [ left | center | right | top | bottom | <percentage> | <length> ]
|
  [ left | center | right | <percentage> | <length> ]
  [ top | center | bottom | <percentage> | <length> ]
|
  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]

Possible Values

percentage

Specifies the image's position as a percentage. This represents an offset of the top left corner of the background image from the top left corner of the background positioning area.

length

Specifies the image's position as a length. This represents an offset of the top left corner of the background image from the top left corner of the background positioning area.

top
Computes to 0% for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.
right
Computes to 100% for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.
bottom
Computes to 100% for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.
left
Computes to 0% for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.
center
Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.

If only one value is specified, the second value is assumed to be center. If two values are given, a length or percentage as the first value represents the horizontal position (or offset) and a length or percentage as the second value represents the vertical position (or offset).

If three or four values are given, then each percentage or length represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. If three values are given, the missing offset is assumed to be zero.

Negative values are allowed. These represent an offset outward from the edge of the background positioning area.

For more information on valid values, see the position data type.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
0% 0%
Applies To
All elements
Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

Here are some code examples to demonstrate the various ways of specifying a background position.

background-position: 30%;
background-position: 30px;
background-position: 3em;
background-position: 90% 30%;
background-position: left 30%;
background-position: left 30px;
background-position: 90% top;
background-position: right top;
background-position: bottom right;
background-position: bottom left;
background-position: left 20px top;
background-position: left top 30px;

Official Specifications