Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | object-position Property

  • Last Updated : 10 Jan, 2022

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:
     

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=
</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=
</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=
</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=
</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=
    </div>
</body>
 
</html>
  • Output:
     

object-position: inherit

  •  

Supported Browsers: The browser supported by object-position property are listed below: 
 

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!