Definition:
CSS background-position sets the starting point of the background elements.
Property Values are:
background-position:
center
left
right
center top
center center
center bottom
left top
left center
left bottom
right top
right center
right bottom
Syntax:
background-position: center;
background-position: left;
background-position: right;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
Let’s use the following image to set as a background-position above each property value for example.
Let’s have a look in detail by applying each background-position.
Here is an image that I am going to use for each background-position value listed above.

1) background-position: center;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center;
}
.text{
padding-top: 100px;
}
</style>
</head>
<body>
<div id="background-position">
<h3>background-position: center;</h3>
<p class="text"> Here is an example of image with background-position's property value is center.</p>
</div>
</body>
</html>
Result:

2. background-position:left;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: left;
}
.text{
padding-left: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3>background-position: left;</h3>
<p class="text"> Here is an example of background-position with property value left.</p>
</div>
</body>
</html>
Result:

3. background-position: right;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: right;
}
.text{
padding-right: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3>background-position: right;</h3>
<p class="text"> Here is an example of background-position with property value right.</p>
</div>
</body>
</html>
Result:

4. background-position: center top;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center top;
}
.text{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="background-position">
<h3>background-position: center top;</h3>
<p class="text"> Here is an example of background-position with property value center top.</p>
</div>
</body>
</html>
Result:

5. background-position: center center;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center center;
}
.text{
padding-top: 100px;
}
</style>
</head>
<body>
<div id="background-position">
<h3>background-position: center center;</h3>
<p class="text"> Here is an example of background-position with property value center center.</p>
</div>
</body>
</html>
Result:

6. background-position: center bottom
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center bottom;
}
.text{
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="background-position">
<h3>background-position: center bottom;</h3>
<p class="text"> Here is an example of background-position with property value center bottom.</p>
</div>
</body>
</html>
Result:

7. background-position: left top;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: left top;
}
.heading
{
padding-left: 80px;
}
.text{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="background-position">
<h3 class="heading">background-position: left top;</h3>
<p class="text"> Here is an example of background-position with property value left top.</p>
</div>
</body>
</html>
Result:

8. background-position: left center;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: left center;
}
.heading
{
padding-left: 80px;
}
.text{
padding-left: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3 class="heading">background-position: left center;</h3>
<p class="text"> Here is an example of background-position with property value left center.</p>
</div>
</body>
</html>
Result:

9. background-position: left bottom;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: left bottom;
}
.heading
{
padding-left: 80px;
}
.text{
padding-left: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3 class="heading">background-position: left bottom;</h3>
<p class="text"> Here is an example of background-position with property value left bottom.</p>
</div>
</body>
</html>
Result:

10. background-position: right top;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: right top;
}
.heading
{
padding-right: 80px;
}
.text{
padding-right: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3 class="heading">background-position: right top;</h3>
<p class="text"> Here is an example of background-position with property value right top.</p>
</div>
</body>
</html>
Result:

11. background-position: right center;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: right center;
}
.heading
{
padding-right: 80px;
}
.text{
padding-right: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3 class="heading">background-position: right center;</h3>
<p class="text"> Here is an example of background-position with property value right center.</p>
</div>
</body>
</html>
Result:

12. background-position: right bottom;
<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: right bottom;
}
.heading
{
padding-right: 80px;
}
.text{
padding-right: 80px;
}
</style>
</head>
<body>
<div id="background-position">
<h3 class="heading">background-position: right bottom;</h3>
<p class="text"> Here is an example of background-position with property value right bottom.</p>
</div>
</body>
</html>
Result:

Donate to support writers.
You may interest on the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)