CSS object-position Property

What You’ll Learn

The object-position property controls which part of an image or video stays visible inside its container. It is especially helpful when content is cropped by object-fit: cover and you need to keep the subject in frame.

Introduction

The object-position property in CSS is used to specify the alignment of the content within a replaced element, such as an image or a video.

This property is particularly useful when the content is larger than the element’s box and gets cropped. By adjusting the position, you can control which part of the content is visible within the element.

Definition and Usage

The object-position CSS property sets the anchor point of replaced content inside its box. Think of it like choosing which corner or center of a photo should stay visible when the frame is smaller than the image.

It works best alongside sizing properties and often pairs with object-fit when you want responsive thumbnails, avatars, or hero banners that crop cleanly without losing the important subject.

📝 Syntax

The syntax for the object-position property is straightforward. It allows you to specify the position of the content within the element using keywords, percentages, or length units:

element {
  object-position: value;
}

Basic Example

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom right;
}

Syntax Rules

• Use one or two values for horizontal and vertical alignment.
• Keywords such as top, center, and right can be combined.
• Percentages and lengths offer precise control over the visible area.
• It is most visible when content overflows or is cropped by object-fit.

🎯 Default Value

The default value of the object-position property is 50% 50%, which centers the content within the element both horizontally and vertically.

That is why many cropped images look balanced by default, and you only need to change the value when the subject is near an edge of the photo.

💎 Property Values

The object-position property accepts various values to define the position. Values can be combined to set both horizontal and vertical alignment.

Supported Elements

object-position applies to replaced elements whose content comes from an external resource:

• <img> — the most common use case for thumbnails and avatars.
• <video> — useful for reframing cropped background videos.
• <iframe> — can shift embedded content within a responsive frame.

For visible results, give the element a defined box and pair with object-fit when the media should fill or crop inside that box.

Examples Gallery

Use object-position to keep the most important part of an image visible inside a cropped frame.

📍 Alignment Basics

Start with keyword values when you want to shift focus to a corner or edge of the image.

Example 1 — Focus on bottom right

In this example, an image larger than its container is aligned to the bottom-right corner so that area stays visible.

bottom-right.html

Copy

<style>
  .container {
    width: 200px;
    height: 200px;
    overflow: hidden;
  }

  .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
  }
</style>

<div class="container">
  <img src="/images/bg-image.webp" alt="Example image">
</div>

View Output Try It Yourself

📤 Output:

How It Works

Because the image fills the box with cover, edges are cropped. bottom right keeps the lower-right area in view.

Example 2 — Portrait with top center

Use top center when faces or headings near the top of a photo should stay visible in a short frame.

top-center.css

Copy

.hero img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top center;
}

View Output Try It Yourself

📤 Output:

How It Works

The image still covers the frame, but the visible crop favors the top-middle area instead of the default center.

🎯 Precise Control

Use percentages and combined values when keyword alignment is not exact enough.

Example 3 — Percentage positioning

Percentages let you nudge the visible area with more precision than keywords alone.

percentage-position.css

Copy

.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 75%;
}

View Output Try It Yourself

📤 Output:

How It Works

25% 75% anchors the image so the point 25% across and 75% down from the top-left aligns with the box.

Example 4 — Circular avatar crop

Combine a square frame, object-fit: cover, and object-position for profile photos.

avatar-position.css

Copy

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

View Output Try It Yourself

📤 Output:

How It Works

The circular frame crops the image, and center top keeps the upper area of the photo in view for headshots.

Pair with object-fit

object-position works best when the browser has already decided how content should fit. Use object-fit: cover or contain first, then adjust position to control what remains visible.

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

♿ Accessibility

• Do not crop out meaning — If repositioning hides important content, choose a different crop or image.
• Keep alt text accurate — Describe the image itself, not just the visible cropped portion.
• Test on small screens — A position that works on desktop may crop differently on mobile.
• Avoid text inside images — Cropping can remove words users need to read.

💡 Best Practices