CSS object-position Property

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

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

<img class="test" src="images/tech.gif" alt="">
img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}
.test {
  object-position: right top;
}

Browser Support

The following table will show you the current browser support for the CSS object-position property.

Desktop
Edge Chrome Firefox Opera Safari
7932361910
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3236191024.4.3

Last updated by CSSPortal on: 2nd January 2024