Skip to content
Related Articles

Related Articles

Improve Article

CSS | background-position Property

  • Last Updated : 02 Sep, 2021

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

Syntax:

background-position: value;

Default Value

  • 0% 0%

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.

    html




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


    Output:
    
    

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

    html




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


    Output :
    
    

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

    html




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

    Output:

    
    



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

    html




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


    Output :
    
    

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

    html




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

    Output:

    
    

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

    html




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

    Output:

    
    

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

    html




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

    Output:

    
    

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

    html




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

    Output

    
    

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

    html




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

    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.

    html




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

    Output:

    
    

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

    html




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

    Output:

    
    

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

  • Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :