CSS object-position Property
The object-position property is used together with the object-fit property to specify how a replaced element's content box should be positioned within its padding box using x/y coordinates. The first value controls the x-axis and the second value controls the y-axis.
This property can be specified by a keyword (left, center, right, top, or bottom), or a number (in px or %).
INFO
Negative values are valid.
| Initial Value | 50% 50% |
|---|---|
| Applies to | Replaced elements. |
| Inherited | No. |
| Animatable | Yes. The image is animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.objectPosition = "20% 0%"; |
Syntax
CSS object-position syntax
css
object-position: <position> | initial | inherit;Example of the object-position property:
CSS object-position code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 50% 50%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 50% 50%</h3>
<img class="tree" src="https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Result
Example of the object-position property specified as "left":
CSS object-position left example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: left;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: left</h3>
<img class="tree" src="https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Example of the object-position property specified in "px" and "%":
CSS object-position with number example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 10px 20%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</h3>
<img class="tree" src="https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Values
| Value | Description |
|---|---|
<position> | Specifies the position of the replaced element inside its box. Can be a keyword (top, bottom, left, right, center) or a combination of keywords, percentages, or lengths. |
initial | Sets the property to its default value. |
inherit | Inherits the property from its parent element. |
Practice
What does the 'object-position' property in CSS do?