Skip to content
Related Articles

Related Articles

CSS background-position Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 22 Oct, 2021

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.

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>
   
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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

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>
<body>
</body>
</html>

Output:

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.

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>
<body>
</body>
</html>

Output:

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 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>
<body>
</body>
</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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!