← Back to Chapters

CSS object-position

?️ CSS object-position

? Quick Overview

The object-position property controls which part of a replaced element (like an image, video, or <canvas>) is visible inside its box when it is resized using object-fit. Instead of always centering the image, you can focus on the top, bottom, corners, or even specific percentage positions.

? Key Concepts

  • Works on replaced elements such as <img>, <video>, and <picture>.
  • Usually used together with object-fit (like cover or contain).
  • Helps you “crop” and focus on the most important part of an image (face, subject, logo, etc.).
  • Accepts keywords (top, left, center…) or percentages (20% 80%).
  • The first value is horizontal (x-axis), the second is vertical (y-axis).

? Syntax

Basic syntax of object-position with object-fit is:

? View Code Example 
/* x-position y-position for the replaced element */
img {
object-fit: cover;
object-position: center center;   /* keywords */
}

img.hero {
object-fit: cover;
object-position: 30% 70%;        /* percentages (x% y%) */
}

? Visual Focus Examples

All boxes below use the same image with different object-position values. Imagine these as profile pictures, banners, or thumbnails.

Sample
center center
Sample
top left
Sample
bottom right
Sample
20% 80%

? Detailed Explanation

The object-position property takes two values:

  • First value → Horizontal alignment (x-axis): left, center, right, or a percentage.
  • Second value → Vertical alignment (y-axis): top, center, bottom, or a percentage.

Example: object-position: 10% 90%; means:

  • 10% from the left (horizontally)
  • 90% from the top (vertically)
? View Code Example 
/* Focus different areas of the same image */
img.profile {
width: 200px;
height: 150px;
object-fit: cover;
object-position: center;        /* same as center center */
}

img.profile-top {
width: 200px;
height: 150px;
object-fit: cover;
object-position: top center;    /* show more of the top area */
}

img.profile-custom {
width: 200px;
height: 150px;
object-fit: cover;
object-position: 20% 80%;       /* custom focus point (x% y%) */
}

? Relation with object-fit

object-position becomes most useful when combined with different object-fit values:

object-fit object-position Effect
cover center Crops and centers image inside the box.
cover top left Shows the top-left corner of the image.
contain bottom Fits full image and aligns it to the bottom.
none center Shows image at original size, aligned to center.
? View Code Example 
/* Comparing object-fit and object-position combinations */
.card-img-cover {
width: 220px;
height: 140px;
object-fit: cover;
object-position: top left;   /* crop from top-left */
}

.card-img-contain {
width: 220px;
height: 140px;
object-fit: contain;
object-position: bottom;     /* image stays fully visible, aligned bottom */
}

.card-img-original {
width: 220px;
height: 140px;
object-fit: none;
object-position: center;     /* original size, centered inside box */
}

? Live Output / What You Would See

If you apply the styles above to three images inside equal-sized boxes:

  • .card-img-cover will zoom/crop the image and lock on the top-left area.
  • .card-img-contain will always show the full image, but stick it to the bottom edge.
  • .card-img-original may overflow its box if the original image is larger, but it stays centered.

This combination lets you design professional-looking cards, hero sections, profile pictures, and thumbnails where the focus point is always correct, regardless of screen size.

? Tips & Best Practices

  • Always pair object-position with a meaningful object-fit value like cover or contain.
  • Use keywords (top, left, bottom, center) for quick alignment.
  • Use percentages (like 50% 75%) when you need precise focus control on a subject.
  • Great for profile pictures, hero banners, and cropped thumbnails where a face or logo must stay visible.
  • Experiment with object-fit: none; and object-position to understand raw cropping behavior.

? Try It Yourself

  1. Create a 200×150 px image box with object-fit: cover and try different object-position values.
  2. Use object-position to focus on different areas of an image (top, center, bottom, corners).
  3. Try applying object-fit to a <div> and observe that it does not work (it must be a replaced element).
  4. Design a profile picture preview where the face is kept in the top-right using object-position: right top;.
  5. Set object-fit: none; and move the image to the bottom-left using object-position: left bottom; and observe cropping.
? View Practice Starter Code 
<!-- Simple playground for object-fit and object-position -->
<div style="width: 200px; height: 150px; border: 2px dashed #999; overflow: hidden;">
<img src="your-image.jpg"
     style="width: 100%; height: 100%; object-fit: cover; object-position: center center;">
</div>

<!-- Try changing object-fit and object-position values above -->