Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!

Summary

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

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

Syntax

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

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

Values

<position>
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

<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 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%;
}

Output

Specifications

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
19.0
10.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4.4 36 (36) No support 11.5-o
24
No support

[1] WebKit Nightly fixed in bug 122811.

See also

Document Tags and Contributors

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