CSS background-position-x

Please Share On:

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:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial