The object-position
CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.
You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit
property.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* <position> values */ object-position: center top; object-position: 100px 50px; /* Global values */ object-position: inherit; object-position: initial; object-position: unset;
Values
<position>
- From one to four values that define the 2D position of the element. Relative or absolute offsets can be used.
Note: The position can be set so that the replaced element is drawn outside its box.
Formal definition
Initial value | 50% 50% |
---|---|
Applies to | replaced elements |
Inherited | yes |
Percentages | refer to width and height of element itself |
Computed value | as specified |
Animation type | repeatable list of simple list of length, percentage, or calc |
Formal syntax
<position>where
<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where
<length-percentage> = <length> | <percentage>
Examples
Positioning image content
HTML
Here we see HTML that includes two <img>
elements, each displaying the MDN logo.
<img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="MDN Logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="MDN Logo"/>
CSS
The CSS includes default styling for the <img>
element itself, as well as separate styles for each of the two images.
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%; }
The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'object-position' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
object-position | Chrome Full support 31 | Edge Full support 16 | Firefox Full support 36 | IE No support No | Opera
Full support
19
| Safari Full support 10 | WebView Android Full support 4.4.3 | Chrome Android Full support 31 | Firefox Android Full support 36 | Opera Android
Full support
19
| Safari iOS Full support 10 | Samsung Internet Android Full support 2.0 |
Support for three-value syntax of position | Chrome No support 31 — 68 | Edge No support 16 — 79 | Firefox No support 36 — 70 | IE No support No | Opera
No support
19 — 55
| Safari Full support 10 | WebView Android No support 4.4.3 — 68 | Chrome Android No support 31 — 68 | Firefox Android Full support 36 | Opera Android
No support
19 — 48
| Safari iOS Full support 10 | Samsung Internet Android No support 2.0 — 10.0 |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Other image-related CSS properties:
object-fit
,image-orientation
,image-rendering
,image-resolution
.