-
Hajipur, Bihar, 844101
CSS Object Position
The CSS object-position property is used to control the alignment of images and videos inside their container. When you use object-fit, especially with values like cover, parts of the image may be cropped. By default, the browser centers the image, but this is not always ideal. The object-position property lets you decide which part of the image should stay visible.
In this chapter, you will learn what CSS object-position is, why it is important, how it works, different positioning values, real-world use cases, common mistakes, and best practices for using it effectively in modern web design.
What Is CSS object-position
The object-position property specifies how the content of a replaced element such as an image or video is positioned inside its container.
It works together with object-fit and applies to:
-
<img> -
<video>
By default, object-position is set to 50% 50%, which means center horizontally and vertically.
Example:
img {
object-fit: cover;
object-position: center;
}
This centers the image inside its container.
Why CSS object-position Is Important
When images are cropped using object-fit: cover, important parts of the image may be hidden. For example, a person’s face may be cut off or a product may not appear properly.
CSS object-position helps you:
-
Control which part of the image stays visible
-
Improve visual focus
-
Prevent important content from being cropped
-
Create professional layouts
-
Improve user experience
It is especially useful for banners, profile images, product cards, and hero sections.
How CSS object-position Works
The object-position property defines the horizontal and vertical alignment of the image inside its container.
It works only when:
-
The element has a fixed width and height
-
object-fitis applied
Example:
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top center;
}
Here, the image is cropped from the bottom, keeping the top portion visible.
Default Behavior of object-position
If you do not specify object-position, the browser uses the default value.
Default value:
object-position: 50% 50%;
This means the image is centered both horizontally and vertically.
In many cases, this is fine, but not always ideal.
Syntax of CSS object-position
The syntax is simple and flexible.
object-position: x y;
You can use:
-
Keywords
-
Percentages
-
Length values
Each value controls alignment on one axis.
Using Keywords with object-position
Keywords are the easiest way to position images.
Common keywords include:
-
left
-
right
-
top
-
bottom
-
center
Example:
img {
object-fit: cover;
object-position: left top;
}
This aligns the image to the top-left corner of the container.
Common Keyword Combinations
object-position: center;
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: top center;
object-position: bottom right;
Keywords are readable and ideal for simple layouts.
Using Percentages with object-position
Percentages give more precise control over positioning.
Example:
img {
object-position: 20% 80%;
}
This means:
-
20% from the left
-
80% from the top
Percentages are calculated relative to the image and container size.
How Percentage Positioning Works
Percentages define the point of the image that aligns with the container.
Example:
object-position: 0% 0%;
This aligns the top-left of the image with the top-left of the container.
object-position: 100% 100%;
This aligns the bottom-right of the image with the bottom-right of the container.
Percentages are useful when you want fine-grained control.
Using Length Values with object-position
You can also use pixel or other length units.
Example:
img {
object-position: 10px 30px;
}
This moves the image 10px from the left and 30px from the top.
Length values are less responsive but can be useful in fixed layouts.
object-position with object-fit: cover
This is the most common use case.
Example:
img {
width: 100%;
height: 250px;
object-fit: cover;
object-position: center top;
}
This ensures the top part of the image stays visible while the rest is cropped.
Ideal for:
-
Hero images
-
Blog banners
-
Profile headers
object-position with object-fit: contain
When using contain, object-position controls where the image sits inside the container.
Example:
img {
object-fit: contain;
object-position: center bottom;
}
This places the image at the bottom center while keeping the full image visible.
Useful for logos and icons.
object-position with Videos
The object-position property works the same way with videos.
Example:
video {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
}
This is commonly used for background videos in hero sections.
Real-World Use Cases of CSS object-position
CSS object-position is widely used in modern UI design.
Common use cases include:
-
Profile images where faces must remain visible
-
Product images focusing on key details
-
Blog thumbnails with text overlay
-
Hero banners with focal points
-
Video backgrounds
It gives designers full control over image alignment.
Example: Profile Card Image
.profile img {
width: 150px;
height: 150px;
object-fit: cover;
object-position: top;
border-radius: 50%;
}
This ensures the face remains visible in circular profile images.
Example: Blog Thumbnail
.thumbnail img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
This keeps thumbnails consistent across posts.
Common Mistakes When Using object-position
Some frequent mistakes include:
-
Using object-position without object-fit
-
Forgetting to define width and height
-
Expecting object-position to work on background images
-
Cropping important content accidentally
Remember, object-position does not affect background images. For those, use background-position.
Difference Between object-position and background-position
It is important to understand this difference.
-
object-position works on
<img>and<video> -
background-position works on background images
-
object-position aligns media content
-
background-position aligns background layers
They are similar but used in different contexts.
Responsive Design and object-position
object-position works well in responsive layouts.
Best practices include:
-
Use percentage values for responsiveness
-
Test across screen sizes
-
Combine with flexible height units
-
Adjust positioning for mobile views
Example:
img {
width: 100%;
height: 40vh;
object-fit: cover;
object-position: center;
}
This adapts well to different screen sizes.
Accessibility Considerations
When using object-position:
-
Ensure important image content remains visible
-
Always include meaningful alt text
-
Avoid hiding critical information
-
Test images with different screen sizes
Accessibility should always be a priority.
Performance Considerations
CSS object-position has minimal performance impact. However:
-
Avoid loading oversized images
-
Use optimized image formats
-
Combine with responsive image techniques
Good performance improves user experience.
Best Practices for CSS object-position
Follow these best practices:
-
Always use with object-fit
-
Use keywords for simple layouts
-
Use percentages for precise control
-
Test cropping visually
-
Keep important content visible
These practices help create polished layouts.
Summary of CSS Object Position
CSS object-position gives you control over how images and videos are aligned inside their containers. It works alongside object-fit to ensure important parts of media remain visible, especially when cropping occurs. By using keywords, percentages, or length values, you can fine-tune image alignment for banners, cards, profiles, and responsive layouts. Mastering object-position is essential for building clean, professional, and user-friendly designs.
Practice Questions
Q1. Center an image with object-position.
Q2. Align image top-right inside its container.
Q3. Position image 25% from left and 50% from top.
Q4. Use pixels to position image 15px from left and 30px from top.
Q5. Combine object-fit: cover with object-position: bottom center.
Q6. Align image to bottom-left corner.
Q7. Use object-position to show the upper-left quarter of an image.
Q8. Position image using keywords right and center.
Q9. Set object-position to 0 0 (top-left).
Q10. Adjust image position responsively with media queries.
