The object-position property of CSS specifies how an image or video element is positioned with x/y coordinates inside its content box.
Syntax:
object-position: <position> | initial | inherit
Property values:
- position: This specifies the position of the element. It takes 2 numerical values corresponding to the distance from the left of the content-box and the distance from the top of the content-box respectively. It is also possible to use negative values.
Example #1:
html
<!DOCTYPE html>
<head>
<title>CSS object-position</title>
<style>
img {
width: 300px;
height: 250px;
background-color: silver;
object-fit: none;
/* Setting the object-position to '10px'
from the leftmost of the
box and '30px' from the topmost of the box */
object-position: 10px 30px;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>object-position: 10px 30px</p>
<img id="object" src=
</body>
</html>
|
Output:
Example #2:
html
<!DOCTYPE html>
<head>
<title>CSS object-position</title>
<style>
img {
width: 300px;
height: 250px;
background-color: silver;
object-fit: none;
/* Setting the object-position to '50%'
from the leftmost of the
box and '75%' from the topmost of the box */
object-position: 50% 75%;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>object-position: 50% 75%</p>
<img id="object" src=
</body>
</html>
|
Output:
Example #3:
html
<!DOCTYPE html>
<head>
<title>CSS object-position</title>
<style>
img {
width: 300px;
height: 250px;
background-color: silver;
object-fit: none;
/* Setting the object-position to 'left'
from the leftmost of the
box and 'bottom' from the topmost of the box */
object-position: left bottom;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>object-position: left bottom</p>
<img id="object" src=
</body>
</html>
|
Output:
Example #4:
html
<!DOCTYPE html>
<head>
<title>CSS object-position</title>
<style>
img {
width: 300px;
height: 250px;
background-color: silver;
object-fit: none;
/* Setting the object-position to 'center'
from the leftmost of the
box and 'top' from the topmost of the box */
object-position: center top;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>object-position: center top</p>
<img src=
</body>
</html>
|
Output:
- initial: This sets the default value of the property, that is 50% 50%, where the element is in the middle of the content box.
Example:
html
<!DOCTYPE html>
<head>
<title>CSS object-position</title>
<style>
img {
width: 300px;
height: 250px;
background-color: silver;
object-fit: none;
/* sets the default value of
object-position property */
object-position: initial
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>object-position: initial</p>
<img src=
</body>
</html>
|
Output:
- inherit: This receives the property from the parent element. When used with the root element, the initial property is used instead.
Example:
html
<!DOCTYPE html>
<head>
<title>CSS object-position</title>
<style>
#parent {
object-position: 60% 80%;
}
img {
width: 300px;
height: 250px;
background-color: silver;
object-fit: none;
/* inherits the property of the parent */
object-position: inherit;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>object-position: inherit</p>
<div id="parent">
<img src=
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by object-position property are listed below:
- Google Chrome 32
- Edge 79
- Firefox 36
- Opera 19
- Safari 10
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Jun, 2023
Like Article
Save Article