← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 8 of 25

CSS object-position

Imagine cropping a group photo down to a small frame -- object-fit decides whether the photo gets squished, stretched, or cropped to fit, but object-position decides WHICH part of the photo stays in frame: the person on the left, or the one on the right.

In this page:

  1. What object-position Controls
  2. Using Percentage and Keyword Values
  3. Why It Only Matters With Certain object-fit Values
  4. Repositioning a Portrait in a Landscape Box
  5. Combining With Video Elements
Syntax
css 
selector {
  object-fit: cover;
  object-position: x y;
}

What object-position Controls

object-position sets the alignment of a replaced element's content (an img or video) within its box after object-fit has determined the scaling behavior -- it answers 'which part of the media stays visible' when cropping or letterboxing occurs, using the same two-value syntax as background-position.

Note:
  • Accepted values:
  • keywords — left, right, top, bottom, center
  • percentage — such as 50% 50%
  • length — such as 10px 20px
  • Default is 50% 50%
  • Works together with object-fit
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: What object-position Controls

css 
<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}
</style>
<img src="https://placehold.co/400x400" alt="Which part of the media stays visible">

Using Percentage and Keyword Values

object-position accepts both keywords (top, bottom, left, right, center) and percentage or length values, where percentages describe how far the image's corresponding point is offset from the box's edge -- 0% 0% is top-left, 100% 100% is bottom-right.

Note:
  • Accepted values:
  • center — default centering
  • top left | top right | bottom left | bottom right — corners
  • 25% 75% — percentages
  • 10px 20px — length offsets from the top-left
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Using Percentage and Keyword Values

css 
<style>
.tl {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 0% 0%;
}
.br {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 100% 100%;
}
</style>
<img class="tl" src="https://placehold.co/400x400" alt="Top-left">
<img class="br" src="https://placehold.co/400x400" alt="Bottom-right">

Why It Only Matters With Certain object-fit Values

object-position has no visible effect when object-fit is fill (the image is stretched to exactly match the box, leaving no extra space to reposition) or when the image's natural size already matches the box exactly.

It's most useful with cover and contain, where cropping or letterboxing actually leaves room to choose.

Note:
  • Accepted values:
  • object-position: 50% 50% — default, centered
  • object-position: top | bottom | left | right | center — keywords
  • object-position: <length> <length> — offsets
  • object-position: <percentage> <percentage> — relative
  • object-fit — needs cover, contain, none or scale-down to have a visible effect
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Why It Only Matters With Certain object-fit Values

css 
<style>
.fill {
  width: 150px;
  height: 100px;
  object-fit: fill;
  object-position: top;
}
</style>
<img class="fill" src="https://placehold.co/400x400" alt="object-position has no visible effect with fill">

Repositioning a Portrait in a Landscape Box

A common real use case is a tall portrait photo placed in a wide landscape-shaped card: object-fit: cover crops the photo to fill the box, and object-position: top ensures a person's face (usually near the top of a portrait) stays visible instead of being cropped out at the center.

Note:
  • Accepted values:
  • object-position: top — keeps the head of a portrait visible
  • object-position: 50% 20% — biased toward the top
  • object-fit: cover — crops the image, so the position decides what stays visible
  • height — the box must be shorter than the image

Example: Repositioning a Portrait in a Landscape Box

css 
<style>
.portrait {
  width: 300px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
</style>
<img class="portrait" src="https://placehold.co/300x500" alt="Face stays visible near the top">

Combining With Video Elements

object-position works identically on video elements as on images, letting a cropped background video keep its important visual content (like a speaker's face in a webcam recording) framed correctly regardless of the player's aspect ratio.

Note:
  • Accepted values:
  • object-position: center — default
  • object-position: <position> — same values as for images
  • object-fit: cover | contain | none — needed to see the effect
  • video element — a replaced element, so both properties apply

Example: Combining With Video Elements

css 
<style>
video {
  width: 300px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
</style>
<video controls></video>
Live Example
Related Topics

CSS Object Fit · CSS Position Offsets · CSS Position · CSS Masking

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using object-position without object-fit, so there is nothing to reposition.
  2. Using object-position on background-image, when it applies to replaced elements like img and video.
  3. Writing the values in the wrong order, since the horizontal value comes first.
Browser Support

Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Object Fit Next Lesson → CSS Masking

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.