CSS object-position Property – Positioning with object-fit

Definition and Usage

The object-position property specifies how the content of replaced elements like images or videos is positioned within the container when used together with the object-fit property.

This property is typically used with the object-fit property on elements like <image> and <video>.

Basic Example

Formal syntax

Values

Accepted values for the object-position property
`position`	Specifies the position of the image or video content inside the content box. The first value controls the horizontal (x-axis) alignment, and the second controls the vertical (y-axis) alignment. The values can be keyword positions such as `left`, `center`, or `right`, or numeric lengths such as pixels or percentages. Negative values are allowed.

Syntax

CSS

/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
object-position: center top;

/* Percentage values */
object-position: 45% 55%;

/* Length values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 13ch 6em;

/* Edge offset values (keyword + length combinations) */
object-position: top 0 right 10px;
object-position: bottom 12px right 20px;
object-position: right 3rem bottom 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;
object-position: revert;
object-position: revert-layer;

Formal definition

The object-position property defines the alignment of a replaced element's content—such as an image or video—within its container, after it has been resized using the object-fit property. It determines the starting point of the content inside the content box. This property is most commonly used with <image> and <video> elements in combination with object-fit .

Formal definition of the object-position property
Initial value	`50% 50%`
Applies to	replaced elements
Inherited	yes
Animatable	yes

Practical Examples

Let's explore how this property works using examples with images and videos.

Image Example

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left bottom;
}

Video Example

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}