Object-position Property
Last updated: 2026-09-13
object-position Object-position Property
The object-position property controls where the content of a replaced element such as an <img> or <video> is shown inside its container. When object-fit leaves space or crops the content, object-position adjusts the alignment focus so key parts stay inside the visible area.
| Category | |
|---|---|
| Initial Value | 50% 50% |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
object-position: <position>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | <percentage> | Type | The coordinates of the content position |
left | center | right | top | bottom | Keyword | A predefined position |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-position | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| Supported in all major browsers | |||||
Tip： object-position is usually paired with object-fit: cover to keep the key content (like a person's head) within the crop.
Tip： It supports keywords (left, center, right, top, bottom) and concrete length or percentage values, similar to background-position.
❓ FAQ
QCan the object-position property be animated with CSS transitions?
AYes. object-position is a length/percentage property, so it supports transition and animation — commonly used for a focus pan on hover, such as the image slowly moving from the center to the top-left when the mouse enters. Note that animating it triggers repaint, so watch performance with large images; you can combine it with composited properties like transform.
QWhat are the object-position percentage values relative to in CSS?
APercentages are computed against the difference between the container size and the content size. 50% 50% is the default center alignment; 100% 100% aligns the content's bottom-right corner with the container's bottom-right; 0% 50% aligns the content's left edge with the container's left edge. Simply put, the larger the percentage, the further the content moves in that direction, and the excess is cropped or left as space.
QHow do object-fit: cover and object-position work together in CSS?
Acover fills the container and crops the excess, and object-position decides where the crop happens. For an avatar that must keep the top of the head, write object-fit: cover; object-position: top;. In image walls and e-commerce main images, aligning every image's visual focus (face, product subject) to a fixed position looks far more professional.
QAre object-position: center and object-position: 50% 50% the same?
AThe effect is identical: both center the content horizontally and vertically. The position syntax matches background-position, supporting the left, center, right, top, and bottom keywords, length values, and percentages, plus offset forms like right 10px top 20px. Use lengths or percentages when you need precise control.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
