object-position
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.
Syntax
/* <position> values */
object-position: center top;
object-position: 100px 50px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
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="mdn.svg" alt="MDN Logo"/>
<img id="object-position-2" src="mdn.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 |
---|
CSS Images Module Level 3 # the-object-position |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
object-position | ChromeFull support32 | EdgeFull support79 | FirefoxFull support36 | Internet ExplorerNo supportNo | OperaFull support19 | SafariFull support10 | WebView AndroidFull support4.4.3 | Chrome AndroidFull support32 | Firefox for AndroidFull support36 | Opera AndroidFull support19 | Safari on iOSFull support10 | Samsung InternetFull support2.0 |
Support for three-value syntax of position | ChromeNo support32 – 68 | EdgeNo support16 – 79 | FirefoxNo support36 – 70 | Internet ExplorerNo supportNo | OperaNo support19 – 55 | SafariNo support10 – 13.1 | WebView AndroidNo support4.4.3 – 68 | Chrome AndroidNo support32 – 68 | Firefox for AndroidNo support36 – 79 | Opera AndroidNo support19 – 48 | Safari on iOSNo support10 – 13.4 | Samsung InternetNo support2.0 – 10.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- Requires a vendor prefix or different name for use.
See also
- Other image-related CSS properties:
object-fit
,image-orientation
,image-rendering
,image-resolution
.