CSS property: background-position
Description
Background image position.
If a background image has been specified, this property specifies its initial position.
If only one value is specified, the second value is assumed to be center.
If at least one value is not a keyword, then the first value represents the horizontal position
and the second represents the vertical position.
Syntax
background-position: <position> [ , <position> ]*;
Values
- <position>
top | bottom[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?[ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]Negative
<percentage>and<length>values are allowed.top Equivalent 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 Equivalent 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 Equivalent 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 Equivalent 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 Equivalent to 50%(left 50%) for the horizontal position if the horizontal position is not otherwise specified, or50%(top 50%) for the vertical position if it is.<percentage> A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size. <length> A length value gives a fixed length as the offset. For example, with a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.
Versions
Examples
p {
background-image: url("logo.png");
background-position: center center;
background-repeat: no-repeat;
}
p {
background-image: url("logo.png");
background-position: right 10px bottom 10px;
background-repeat: no-repeat;
}