CSS object-position Property
Last Updated : 04 Jan, 2025
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 <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; object-position: 10px 30px; } </style> <!--Driver Code Starts--> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: 10px 30px</p> <img id="object" src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> </body> </html> <!--Driver Code Ends-->
Output:
Example 2
HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; object-position: 50% 75%; } </style> <!--Driver Code Starts--> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: 50% 75%</p> <img id="object" src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> </body> </html> <!--Driver Code Ends-->
Output:
Example 3:
html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; object-position: left bottom; } </style> <!--Driver Code Starts--> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: left bottom</p> <img id="object" src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> </body> </html> <!--Driver Code Ends-->
Output:
Example 4:
html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; object-position: center top; } </style> <!--Driver Code Starts--> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: center top</p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> </body> </html> <!--Driver Code Ends-->
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.
html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; object-position: initial } </style> <!--Driver Code Starts--> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: initial</p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> </body> </html> <!--Driver Code Ends-->
Output:
inherit: This receives the property from the parent element. When used with the root element, the initial property is used instead.
html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> #parent { object-position: 60% 80%; } img { width: 300px; height: 250px; background-color: silver; object-fit: none; object-position: inherit; } </style> <!--Driver Code Starts--> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: inherit</p> <div id="parent"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> </div> </body> </html> <!--Driver Code Ends-->
Output:
