Definition:
CSS background-position sets the background of x-position.
Property Values are:
keyword values
percentage values
length values
side-relative values
multiple values
global values
Let’s use the following image to set as a background-position-x above each property value with examples.
Here is an image that I am going to use for each background-position value listed above on the x-axis.

1) For Keyword Values
Syntax:
1.1) background-position-x: left;
1.2) background-position-x: center;
1.3) background-position-x: right;
1.1) background-position-x: left;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: left;
}
.title{
padding-left:90px;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: left;</h3>
<p class="text"> This is an example of background-position-x: left;.</p>
</div>
</body>
</html>
Output:

1.2) background-position-x: center;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: center;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: center;</h3>
<p class="text"> This is an example of background-position-x: center;.</p>
</div>
</body>
</html>
Output:

1.3) background-position-x: right;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: right;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: right;</h3>
<p class="text"> This is an example of background-position-x: right;.</p>
</div>
</body>
</html>
Output:

2) For Percentage Values
Syntax:
background-position-x: 50%;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: 50%;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: 50%;</h3>
<p class="text"> This is an example of background-position-x: 50%;</p>
</div>
</body>
</html>
Output:

3) For Length Values
Syntax:
3.1) background-position-x: 2cm;
3.2) background-position-x: 10px;
3.3) background-position-x: 2em;
3.1) background-position-x: 2cm;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: 2cm;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: 2cm;</h3>
<p class="text"> This is an example of background-position-x: 2cm;</p>
</div>
</body>
</html>
Output:

3.2) background-position-x: 10px;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: 10px;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: 10px;</h3>
<p class="text"> This is an example of background-position-x: 10px;</p>
</div>
</body>
</html>
Output:

3.3) background-position-x: 2em;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: 2em;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: 2em;</h3>
<p class="text"> This is an example of background-position-x: 2em;</p>
</div>
</body>
</html>
Output:

4) For Side-relative Values
Syntax:
4.1) background-position-x: left 10%;
4.2) background-position-x: right 10px;
4.1) background-position-x: left 10%;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: left 10%;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: left 10%;</h3>
<p class="text"> This is an example of background-position-x: left 10%;</p>
</div>
</body>
</html>
Output:
Note: Chrome doesn’t support two value syntax.
I have tested on chrome. So, I am unable to show you an exact output. You can try the above code on Internet Explorer 9.
4.2) background-position-x: right 10px;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: right 10px;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: right 10px;</h3>
<p class="text"> This is an example of background-position-x: right 10px;</p>
</div>
</body>
</html>
Output:
Note: Chrome doesn’t support two value syntax.
I have tested it on chrome. So, I am unable to show you an exact output. You can try the above code on Internet Explorer 9.
5) For Multiple Values
Syntax:
background-position-x: 25% center;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: 25% center;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: 25% center;</h3>
<p class="text"> This is an example of background-position-x: 25% center;</p>
</div>
</body>
</html>
Output:
Note: Chrome doesn’t support two value syntax.
I have tested on chrome. So, I am unable to show you an exact output. You can try the above code on Internet Explorer 9.
6) For Global Values
Syntax:
6.1) background-position-x: initial;
6.2) background-position-x: inherit;
6.3) background-position-x: unset;
6.1) background-position-x: initial;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: initial;
}
.title{
padding-left: 80px;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: initial;</h3>
<p class="text"> This is an example of background-position-x: initial;</p>
</div>
</body>
</html>
Output:

6.2) background-position-x: inherit;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: inherit;
}
.title{
padding-left: 80px;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: inherit;</h3>
<p class="text"> This is an example of background-position-x: inherit;</p>
</div>
</body>
</html>
Output:

6.3) background-position-x: unset;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-position-x{
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-x: unset;
}
.title{
padding-left: 80px;
}
.text{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="background-position-x">
<h3 class="title">background-position-x: unset;</h3>
<p class="text"> This is an example of background-position-x: unset;</p>
</div>
</body>
</html>
Output:

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)