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

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

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

Initial value50% 50%
Applies toreplaced elements
Inheritedyes
Percentagesrefer to width and height of element itself
Mediavisual
Computed valueas specified
Animation typerepeatable list of simple list of length, percentage, or calc
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<position>
From one to four values that define the 2D position of the element. Relative or absolute offsets can be used. Note that the position can be set outside of the element's box.

Formal syntax

<position>

where
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where
<length-percentage> = <length> | <percentage>

Example

HTML

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

CSS

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

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

#object-position-2 {
  object-position: 100% 10%;
}

Output

Specifications

Specification Status Comment
CSS Images Module Level 4
The definition of 'object-position' in that specification.
Working Draft Adds the from-image and flip keywords.
CSS Images Module Level 3
The definition of 'object-position' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support311636 No

19

11.6 -o-

10
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4.4.4 ? ?36

24

11.5 -o-

No ?

See also

Document Tags and Contributors

 Last updated by: fscholz,