CSS object-position Property

Last Updated : 06 Jun, 2023

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
</body> 
  
</html> 

Output:

object-position: 10px 30px

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
</body> 
  
</html> 

Output:

object-position: 50% 75%

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
</body> 
  
</html> 

Output:

object-position: left bottom

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
</body> 
  
</html> 

Output:

object-position: center top

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
</body> 
  
</html> 

Output:

object-position: initial

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    </div> 
</body> 
  
</html> 