CSS object-position Property

The object-position property determines the alignment of a replaced element’s content (for example images, videos, or other embedded resources) within the element’s content box. It controls the focal point — where the source content is placed relative to the element’s box — so when the intrinsic size of the content does not match the box (due to scaling, cropping, or aspect-ratio preservation) the developer can decide which part of the content remains visible. Importantly, changing object-position does not alter the element’s laid-out box or the document flow; it only affects how the replaced resource is painted inside that box.

In practical use, object-position is often paired with object-fit, which governs how the content scales to fit the box. When content is scaled or cropped by object-fit, object-position specifies the location within the box that acts as the anchor or focal point for that scaling/cropping. That makes it useful for responsive image composition: you can maintain a consistent visible subject across differing aspect ratios and container sizes by shifting the focal area rather than altering layout or choosing a different image source.

Conceptually it is analogous to how backgrounds are positioned, but for replaced elements instead of background layers — compare with background-position, which affects background image placement and painting. It also differs from transform-related origin controls such as transform-origin, because object-position establishes static placement of content inside the element rather than defining the pivot point for geometric transforms. That means you can combine these properties: use object-position to choose a focal point and use transforms or animations to alter scale or motion around that content.

From a workflow perspective, object-position is handy for delivering consistent visual composition across breakpoints without changing markup or swapping art-directed image sources. It is animatable in many user agents, so designers can create smooth focal-point transitions (for example, panning across a photo). Because it only affects the painted area and not layout, be mindful of accessibility and content-critical design: important visual information may be cropped out if relying solely on object-position, so provide appropriate alternative text, consider art-directed source choices where necessary, and test across aspect ratios and screen sizes to ensure essential content remains visible.