object-position
Quick Summary for 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.
Code Usage for object-position
/* <position> values */ object-position: center top; object-position: 100px 50px;  /* Global values */ object-position: inherit; object-position: initial; object-position: revert; object-position: unset; 
More Details for object-position

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 value50% 50%
Applies toreplaced elements
Inheritedyes
Percentagesrefer to width and height of element itself
Computed valueas specified
Animation typerepeatable 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

See also

Other image-related CSS properties: object-fit, image-orientation, image-rendering, image-resolution.

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Random CSS Property

@viewport

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
max-width (@viewport) css reference