{"id":194885,"date":"2015-02-03T09:12:46","date_gmt":"2015-02-03T16:12:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=194885"},"modified":"2021-05-24T07:27:30","modified_gmt":"2021-05-24T14:27:30","slug":"object-position","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","title":{"rendered":"object-position"},"content":{"rendered":"\n

The CSS property object-position<\/code> is used to align any selected replaced element (e.g., an <img><\/code>) within the box that contains it.<\/p>\n\n\n\n

img {\n  object-position: right bottom;\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
\"\"
An <img><\/code> element will align to bottom-right edge of its parent container with object-position: right bottom;<\/code>.<\/figcaption><\/figure>\n\n\n\n
While it\u2019s probably most common to see object-position<\/code> used on <img><\/code> elements, it can be used on other types of replaced elements, like <iframe><\/code>, <video><\/code>, and <embed><\/code>.<\/p>\n\n\n\n
object-position<\/code> is part of the CSS Images Module Level 3<\/a> specification.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
object-position: <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><\/code><\/pre>\n\n\n\n
That\u2019s just a really<\/em> long way of explaining that we can use keywords or length values to set an element\u2019s alignment within a container.<\/p>\n\n\n
Values<\/h3>\n\n\n
\/* Positional values *\/\nobject-position: 50% 50%; \/* default position *\/\nobject-position: right bottom;\nobject-position: 20px 95px;\nobject-position: center 20px; \/* mix and match *\/\nobject-position: 60% top; \/* mix and match *\/\n\n\/* Global values *\/\nobject-position: inherit;\nobject-position: initial;\nobject-position: unset;<\/code><\/pre>\n\n\n
Examples<\/h3>\n\n\n
Let\u2019s look at a few different examples of the object-position<\/code> property at work.<\/p>\n\n\n
Basic usage<\/h4>\n\n\n