CSS object-position Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The object-position CSS property allows you to precisely control the placement of an image or object within its containing element, typically used in conjunction with the "background-image" property. By specifying the horizontal and vertical coordinates, you can determine the exact position of the object, ensuring it aligns as desired within the container. This property is particularly useful when you need to fine-tune the positioning of background images or objects to achieve the desired visual layout on a webpage.

Initial value: 50% 50%
Applies to: Replaced elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.objectPosition

Interactive Demo

object-position: 50% 50%;

object-position: right top;

object-position: left bottom;

object-position: 250px 125px;

Syntax

object-position: <position>

Values

<position>Specifies the position of a object area (e.g. background image) inside a positioning area (e.g. background positioning area).

Example

HTML

<img class="test" src="images/tech.gif" alt="">

CSS

img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}
.test {
  object-position: right top;
}

Result

Editor