Css/Properties/background-position
< Css | Properties
background-position
The background-position property specifies its initial position.
Description
Values | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
---|---|
Initial value | 0% 0% |
Applies to | All elements |
Inherited | No |
Point, Note
- Typically, the values of this property are specified two values. The first value represents the horizontal position and the second represents the vertical position.
- If only one value is specified, the second value is assumed to be 'center'.
Values
<percentage>
<length>
top
Equivalent to 0% for the vertical position.
right
Equivalent to 100% for the horizontal position.
bottom
Equivalent to 100% for the vertical position.
left
Equivalent to 0% for the horizontal position.
center
Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.
inherit
Example
Example A
[style.css]
body { background-image: url("images/bg.png"); background-position: bottom right; background-attachment: fixed; background-repeat: no-repeat; }
Example B
[style.css]
body { background-image: url("images/bg.png"); background-position: 100% 100%; background-attachment: fixed; background-repeat: no-repeat; }
CSS Reference
The CSS specification defines the background-image property in 14.2.1 Background properties.