Background Position Property
Last updated: 2026-09-13
background-position Background Position Property
background-position sets the starting position of a background image within its element, which defaults to the top-left corner (0% 0%). It accepts keywords (left, center, right, top, bottom), length values, and percentages. It is usually combined with background-image to place a background precisely.
| Category | |
|---|---|
| Initial Value | 0% 0% |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
background-position: <position>{1,4};⚙️ Values
| Value | Type | Description |
|---|---|---|
left | center | right | top | bottom | Keyword | Predefined position keywords |
<length> | <percentage> | Type | Explicit position values |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： With percentages, background-position: 100% 100% is equivalent to right bottom.
Tip： Negative values can position a background image outside the element, a common technique for CSS sprites.
❓ FAQ
QHow do I center a background image?
AUse background-position: center; or background-position: 50% 50%; — both center the image horizontally and vertically within the container, since the center keyword equals 50% 50%. Pair it with background-repeat: no-repeat so the image does not tile.
QWhat is the difference between one and two values in background-position?
AWith one value, the unspecified direction defaults to center, so background-position: left is equivalent to left center. With two values, the first sets the horizontal axis and the second the vertical axis, e.g. center top. Offset syntax is also supported, like right 20px bottom 10px, which positions relative to the bottom-right corner.
QWhat is the difference between percentage and pixel positioning?
AWith percentages, the matching point of the image aligns with the matching point of the container: 50% 50% aligns the image's center with the container's center. With pixels, the image's top-left corner is offset by a fixed amount from the container's top-left corner. Use 100% or right 0 to push the image to the right, and offset syntax like right 10px for precise gaps.
QHow do I use background-position for CSS sprites?
AA sprite packs many icons into one image and uses negative background-position to shift and reveal the slice you need. For 32px icons, the second one is background-position: -32px 0. When scaling with background-size, convert the offsets accordingly. This technique is gradually being replaced by icon fonts and inline SVG.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
