Web/CSS/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.

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://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

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 3The definition of 'object-position' in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`object-position`	Chrome Full support 31	Edge Full support 16	Firefox Full support 36	IE No support No	Opera Full support 19 Full support 19 Full support 11.6 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	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 Full support 19 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	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 No support 19 — 55 Full support 11.6 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	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 No support 19 — 48 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	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.