SummaryEdit
The object-position property determines the alignment of the replaced element inside its box.
| Initial value | 50% 50% |
|---|---|
| Applies to | replaced elements |
| Inherited | yes |
| Percentages | refer to width and height of element itself |
| Media | visual |
| Computed value | as specified |
| Animatable | yes, 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 order | the unique non-ambiguous order defined by the formal grammar |
SyntaxEdit
/* <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
How to read CSS syntax.<position>
ExampleEdit
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
SpecificationsEdit
| 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 compatibilityEdit
See alsoEdit
- Other image-related CSS properties:
object-fit,image-orientation,image-rendering,image-resolution.