CSS background-position-y

Please Share On:

Definition:

CSS background-position sets the background of the y-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-y with above each property value for example.

Here is an image that I am going to use for each background-position value listed above on the y-axis.

1) For Keyword Values

Syntax:

1.1) background-position-y: top;
1.2) background-position-y: center;
1.3) background-position-y: bottom;

1.1) background-position-y: top;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: top;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: top;</h3>
  <p class="text"> This is an example of background-position-y: top;.</p>
</div>

</body>
</html>

Output:



1.2) background-position-y: center;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: center;
}
.title{
  padding-left:90px;
}

.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: center;</h3>
  <p class="text"> This is an example of background-position-y: center;.</p>
</div>

</body>
</html>

Output:

1.3) background-position-y: bottom;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: bottom;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: bottom;</h3>
  <p class="text"> This is an example of background-position-y: bottom;.</p>
</div>

</body>
</html>

Output:


2) For Percentage Values

Syntax:

background-position-x: 50%;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: 50%;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: 50%;</h3>
  <p class="text"> This is an example of background-position-y: 50%;.</p>
</div>

</body>
</html>

Output:



3) For Length Values

Syntax:

3.1) background-position-y: 0.2cm;
3.2) background-position-y: 10px;
3.3) background-position-y: 2em;

3.1) background-position-y: 0.2cm;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: 0.2cm;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: 0.2cm;</h3>
  <p class="text"> This is an example of background-position-y: 0.2cm;</p>
</div>

</body>
</html>

Output:


3.2) background-position-y: 10px;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: 10px;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: 10px;</h3>
  <p class="text"> This is an example of background-position-y: 10px;</p>
</div>

</body>
</html>

Output:


3.3) background-position-y: 2em;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: 2em;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: 2em;</h3>
  <p class="text"> This is an example of background-position-y: 2em;</p>
</div>

</body>
</html>

Output:



4) For Side-relative Values

Syntax:

4.1) background-position-y: top 10%;
4.2) background-position-y: bottom 10px;

4.1) background-position-y: top 10%;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: top 10%;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: top 10%;</h3>
  <p class="text"> This is an example of background-position-y: top 10%;</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.


4.2) background-position-y: bottom 10px;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: bottom 10px;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: bottom 10px;</h3>
  <p class="text"> This is an example of background-position-y: bottom 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-y: 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-y: 25% center;
}

.text{
   padding-top: 30px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: 25% center;</h3>
  <p class="text"> This is an example of background-position-y: 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-y: initial;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: initial;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: initial;</h3>
  <p class="text"> This is an example of background-position-y: initial;</p>
</div>

</body>
</html>

Output:


6.2) background-position-y: inherit;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: inherit;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: inherit;</h3>
  <p class="text"> This is an example of background-position-y: inherit;</p>
</div>

</body>
</html>

Output:



6.3) background-position-y: unset;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-position-y{
  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-y: unset;
}
.title{
padding-left:90px;
}
.text{
   padding-left: 90px;
}

</style>
</head>
<body>

<div id="background-position-y">
<h3 class="title">background-position-y: unset;</h3>
  <p class="text"> This is an example of background-position-y: 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