W3cubDocs

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

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
object-position 31 16 36 No 19
19
11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
10
Support for three-value syntax of position 31 — 68 16 — 79 36 — 70 No 19 — 55
19 — 55
11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
10
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
object-position 4.4.3 31 36 19
19
12
Prefixed
Prefixed Implemented with the vendor prefix: -o-
10 2.0
Support for three-value syntax of position 4.4.3 — 68 31 — 68 36 19 — 48
19 — 48
12
Prefixed
Prefixed Implemented with the vendor prefix: -o-
10 2.0 — 10.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position