CSS | object-position Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    object-position: 10px 30px

    Example #2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    object-position: 50% 75%

    Example #3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    object-position: left bottom

    Example #4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Vijay Sirra



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.