CSS/Properties/background-position
From Web Education Community Group
< CSS | Properties
Contents |
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'. [Example C]
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
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
body {
background-image: url("images/bg.png");
background-position: bottom right;
background-repeat: no-repeat;
}
[index.html]
<body>
<p>This is a paragraph</p>
</body>
Example B
[style.css]
body {
background-image: url("images/bg.png");
background-position: 100% 100%;
background-repeat: no-repeat;
}
[index.html]
<body>
<p>This is a paragraph</p>
</body>
Example C
[style.css]
body {
background-image: url("images/bg.png");
background-position: 50%;
background-repeat: no-repeat;
}
[index.html]
<body>
<p>This is a paragraph</p>
</body>
CSS Reference
The CSS specification defines the background-image property in 14.2.1 Background properties.
