object-position aligns an image’s or video’s content inside its own box. It moves the picture within that box, rather than moving the HTML element among its siblings.
Choose which side survives cropping
Cover makes the 300×100 artwork wider than its 180×120 box. Left center retains the left circle; right center retains the right circle. The boxes themselves stay in the same place.
HTML and CSS
HTML
<p>Left center</p>
<img
class="sample left"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>
<p>Right center</p>
<img
class="sample right"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>CSS
.sample {
width: 180px;
height: 120px;
object-fit: cover;
display: block;
}
.left {
object-position: left center;
}
.right {
object-position: right center;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Leave an exact inset around unscaled content
None keeps the image’s natural dimensions. The position places its top-left corner 12px from the image box’s top and left. The pale fill shows the area not covered by the picture.
HTML and CSS
HTML
<img
class="sample"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>CSS
.sample {
width: 340px;
max-width: 100%;
height: 150px;
background: #e2e8f0;
object-fit: none;
object-position: 12px 12px;
display: block;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Position syntax
The initial position is 50% 50%. Use horizontal then vertical lengths or percentages, keywords such as left/top/center, or edge offsets such as right 12px bottom 12px. A single position value centers the other axis.
A percentage aligns that point of the content with the same point of the box: 50% aligns centers. The resulting offset is (box size − rendered content size) × percentage. When content is larger, that difference is negative and controls cropping. When both sizes match in an axis, changing a percentage has no visible effect there.
Common mistakes
Do not use this to align an image element within a flex or grid layout. Use the layout’s alignment properties for that. Position alone does not resize the content; pair it with object-fit. A focal point may need different cropping at narrow widths, so test the subject rather than assuming center is always suitable.
Background images have a separate background-position property.
Sources and browser support
MDN: object-position describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.