Open In App
Related Articles

CSS background-position Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The background-position property in CSS is mainly used to sets the initial position for the background image ie., it is used to set an image at a certain position. The position that is relative to the positioning layer, can be set by using the background-origin property.

Syntax:

background-position: value;

Note: The background-image is placed default to the top-left corner of an element with a repetition on both horizontally & vertically.

Property values:

  • background-position: left top: This property is used to set the image at the left top.
  • background-position: left center :This property is used to set the image at the left center.
  • background-position: left bottom; This property is used to set the image at the left bottom.
  • background-position: center top; This property is used to set the image at the center top position.
  • background-position: center center; This property is used to set the image at the center center position.
  • background-position: center bottom; This property is used to set the image at the center bottom position.
  • background-position: right top; This property is used to set the image at the right top position.
  • background-position: right center; This property is used to set the image at the right center position.
  • background-position: right bottom; This property is used to set the image at the right bottom position.
  • background-position: 25% 75%: This property is used to set the image at 25% from the left and 75% from the top.
    • Note: For x%y% notation, here x% denotes the horizontal position & y% denotes the vertical position with respect to the initial position i.e, left top.
  • background-position: 30px 80px;: This property is used to set the image at the 30px from left and 80px from top.
    • Note: For x-pos y-pos notation, here the units are represented in pixels or any other CSS units. 

Example: This example illustrates the use of background-position property where the position value is set to the left top.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the left center.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the left bottom position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the center top position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the center center position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the center bottom position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the right top position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the right center position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set to the right bottom position.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set in the form of a percentage.

HTML

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

                    

Output:

Example: This example illustrates the use of background-position property where the position value is set in the form of pixels.

HTML

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

                    

Output:

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

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads