CSS object-position Property

The object-position defines an offset for an image or video.

The effect is that the image appears offset in its own container.

It accepts both positive and negative values.

Example

#

An image positioned inside its content box using object-position.

Original Image:

<style>
  .image-position {
    border: 2px solid gold;
    object-fit: none;
    object-position: 150px 100px;
  }
</style>

<img src="/img/css/van-gogh-strawhat.jpg"
     class="image-position">

<p>Original Image:</p>
<img src="/img/css/van-gogh-strawhat.jpg"
     style="border:2px solid gold">

Tip:  object-position is commonly used together with object-fit.

Syntax

object-position: position | initial | inherit;

Values

#

Value Description
position Sets the image or video position inside its content box. Use keyword values: left, right, and center, or any other CSS length value, such as, px, %, em, and others. Negative values are accepted.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when object-position support started for each browser.

Chrome
31.0 Nov 2013
Firefox
36.0 Feb 2015
IE/Edge
16.0 Sep 2017
Opera
19.0 Jan 2014
Safari
10.0 Sep 2016

You may also like

Guides