The object-position property determines the alignment of the replaced element inside its box.

Initial value50% 50%
Applies toreplaced elements
Percentagesrefer to width and height of element itself
Computed valueas specified
Animatableyes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Canonical orderthe unique non-ambiguous order defined by the formal grammar


/* <position> values */
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;


Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

Formal syntax



HTML Content

<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

CSS Content

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  background-color: yellow;
  margin-right: 1em;

#object-position-1 {
  object-position: 10px;

#object-position-2 {
  object-position: 20% 10%;



Specification Status Comment
CSS Image Values and Replaced Content Module Level 4
The definition of 'object-position' in that specification.
Working Draft The from-image and flip keywords have been added.
CSS Image Values and Replaced Content Module Level 3
The definition of 'object-position' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 31.0 36 (36) No support 11.60-o
No support[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4.4 36 (36) No support 11.5-o
No support

[1] WebKit Nightly fixed in bug 122811.

See also

Document Tags and Contributors

 Contributors to this page: yisibl, mrstork, Sebastianz, fscholz, Dholbert, teoli
 Last updated by: yisibl,