Skip to content
Related Articles

Related Articles

Improve Article

CSS | background-position Property

  • Last Updated : 31 Mar, 2021

In CSS background-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. 
     

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 :