Skip to content
Related Articles

Related Articles

CSS | object-position Property
  • Last Updated : 09 Aug, 2019

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 alues:

  • 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:






    <!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:




    <!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:




    <!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:




    <!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:




    <!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:




    <!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 :