CSS object-position Property

Definition and Usage

The object-position property sets how the content of a replaced element — usually an <img> or <video> — is aligned inside the element’s box.

It pairs with object-fit. Fit chooses how the media scales; position chooses which part stays in view after cropping or letterboxing. Empty areas show the element’s background. The initial value is 50% 50% (center). It is not inherited.

CSS Syntax

A position is one to four values: keywords (top, left, center), percentages, lengths, or an edge offset such as bottom 10px right 20px.

Property Values

How to Use object-position

Size the media, choose a fit mode that crops or leaves space, then steer the visible part.

1. Use a replaced element such as <img> or <video>.
2. Give it a defined width and height that can differ from the media’s natural size.
3. Set object-fit — usually cover when you want to crop.
4. Set object-position to keep the subject in view. It is not inherited.

Live Preview

The same image uses object-fit: cover. Change object-position and watch which part stays in the frame.

object-position

centertop lefttop rightbottom leftbottom right25% 75% Apply

center top left top right bottom left bottom right 25% 75%

object-fit: cover fills the frame. Position picks the crop focus.

Frame

object-position: center

CSS Examples

Each snippet adds only what object-position needs: a sized box, a fit mode, and a position. Use Try It Yourself for a live editor.

Example 1 — Keyword Focus

Crop with cover, then pin the visible area to the top-right corner.

CSS

Theme Copy

<style>
  img {
    width: 240px;
    height: 140px;
    object-fit: cover;
    object-position: top right;
    border: 1px solid #ccc;
  }
</style>

<img src="/images/bg-image.webp" alt="Photo focused on top right">

View Output Try It Yourself

Output

How It Works

1. Define the box. Fixed width and height create a frame that may not match the photo’s ratio.
2. Crop with cover. object-fit: cover fills the frame and clips overflow.
3. Steer the crop. object-position: top right keeps the top-right of the photo visible.
4. One keyword is enough. A single keyword like top centers the other axis automatically.

Example 2 — Percentage Offsets

Place the focus with percentages when keywords are too coarse.

CSS

Theme Copy

<style>
  img {
    width: 240px;
    height: 140px;
    object-fit: cover;
    object-position: 25% 75%;
    border: 1px solid #ccc;
  }
</style>

<img src="/images/bg-image.webp" alt="Photo focused with percentages">

View Output Try It Yourself

Output

How It Works

1. Two values mean x then y. 25% is horizontal. 75% is vertical.
2. Percentages refer to the element box. They resolve against the width and height of the media element itself.
3. 50% 50% is the default. That is the centered position you get when the property is unset.
4. Useful for faces. Nudge the crop until the subject sits where you want it.

Example 3 — Length Offsets

Offset from the top-left corner with exact lengths.

CSS

Theme Copy

<style>
  img {
    width: 240px;
    height: 140px;
    object-fit: cover;
    object-position: 20px 10px;
    border: 1px solid #ccc;
  }
</style>

<img src="/images/bg-image.webp" alt="Photo offset with lengths">

View Output Try It Yourself

Output

How It Works

1. First length is horizontal. 20px shifts from the left edge of the box.
2. Second length is vertical. 10px shifts from the top edge.
3. Same grammar as background-position. Edge offsets such as bottom 10px right 20px also work.
4. Values can go outside the box. The object may be drawn partly outside; leftover space shows the background.

Key Takeaways