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:
- 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)