🎯 object-position — Controlling the Focal Point of Images & Videos

🌐 What is object-position?

object-position is a CSS property that controls the alignment or focal pointof replaced elements (like <img>, <video>,<picture>) inside their container. It works together with object-fit to determine which part of the media should remain visible when the element is cropped.

>>“object-position tells the browser *which part of the image matters most*.”

Note

✔ Fully supported in all modern browsers
✔ Works only on replaced elements (not div backgrounds)

🎯 Why Use object-position?

  • Control the cropping area when using object-fit: cover
  • Ensure important content stays visible (faces, products, text)
  • Perfect for hero banners, profile pictures, gallery thumbnails
  • Fine-tune media alignment inside responsive containers

📌 Syntax

object-position Syntax

object-position: <position> | <x> <y>;

Supports keywords, lengths, and percentages.

📐 Supported Position Values

TypeExamples
Keywordstop, center, bottom, left, right
Percentages0% 0%, 50% 50%, 100% 100%
Lengths10px 20px, 2rem 5rem

Note

💡 Percentages refer to the media’s dimensions, not the container’s.

🎨 Example 1 — Focusing on the Top

Top Focus

img {
  object-fit: cover;
  object-position: top;
}

Useful for images where the subject is near the top (portraits, headers).

🎨 Example 2 — Focus on Left Center

Left Center

img {
  object-fit: cover;
  object-position: left center;
}

Keeps the left half of the image always visible.

🎨 Example 3 — Center Cropping

Center Example

img {
  object-fit: cover;
  object-position: 50% 50%; /* default */
}

This is the default — image is centered horizontally & vertically.

🎨 Example 4 — Focus on Bottom Right

Bottom Right Focus

img {
  object-fit: cover;
  object-position: 100% 100%;
}

Crops from the top-left corner, keeping the bottom-right area visible.

🧠 How object-position Works with object-fit

object-fit decides how the image scales.object-position decides which part stays visible.

object-fitobject-position Meaning
coverControls cropping area
containControls alignment inside extra empty space
noneMoves image relative to container

📱 Example — Profile Photo Cropping

Profile Photo Example

.profile img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: 50% 20%; /* focus face area */
}

🎬 Example — Video Cropping Focus

Video Example

video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center top;
}

Keeps action scenes (like heads) in view.

🧩 Advanced — Using object-position with Animations

Animated Cropping

img {
  object-fit: cover;
  animation: pan 5s infinite alternate;
}

@keyframes pan {
  from { object-position: 0% 50%; }
  to   { object-position: 100% 50%; }
}

Creates a “pan effect” on images — popular in hero banners.

⚠️ Common Mistakes

  • ❌ Using object-position without object-fit → no visible effect in most cases
  • ❌ Expecting it to work on background images (use background-position instead)
  • ❌ Using percentages incorrectly (they refer to the media, not container)
  • ❌ Forgetting to set container width + height → object-fit won’t crop correctly

Note

🧠 object-position is the equivalent of background-positionbut for <img> and <video>.

🔥 Summary

object-position gives you precise artistic control over how media is displayed inside containers — especially when cropping occurs. Whether you're designing galleries, hero sections, or profile thumbnails, object-position ensures the important areas stay visible.

>>“object-fit decides how media scales; object-position decides what stays in frame.”

Learn more →MDN Docs 📘