CSS | background-position Property

In CSS body-position property is mainly used to set an image at a certain position.

Syntax:

background-position: value;

Property values:
There are a few important property values which can be used to set the image at a certain position.

  • initial
  • inherit
  • left top
  • left center
  • left bottom
  • center top
  • center center
  • center bottom
  • right top
  • right center
  • right bottom
  • x%y%

    Note: Here x% denotes the horizontal position and y% denotes the vertical position with respect to the initial position i.e, left top.

  • x-pos y-pos
    Note: Here the units are represented in pixels or any other CSS units.

Examples of the values of this property:

  • background-position: left top;: This property is used to set the image at left top.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: left top;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: left center; : This property is used to set the image at left center.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: left center;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output :

    
    
  • background-position: left bottom; : This property is used to set the image at left bottom.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image:
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: left bottom;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: center top;: This property is used to set the image at center top position
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center top;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output :

    
    
  • background-position: center center;: This property is used to set the image at center center position.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center center;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: center bottom;: This property is used to set the image at center bottom position
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center bottom;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: right top;: This property is used to set the image at right top position
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: right top;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: right center;: This property is used to set the image at the right center position.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: right center;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output

    
    
  • background-position: right bottom;: This property is used to set the image at right bottom position
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: right bottom;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: 25% 75%;: This property is used to set the image to set the image at 25% from left and 75% from top.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: 25% 75&;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    
  • background-position: 30px 80px;: This property is used to set the image at the 30pixels from left and 80px from top.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | background-position Property
        </title>
        <style>
            body {
                background-image: 
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: 30px 80px;
            }
        </style>
    </head>
      
    <body>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    
    

Supported Browsers: The browser supported by title attribute are listed below:

  • Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.




Article Tags :

Be the First to upvote.


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