CSS background-position-y Property
The CSS background-position-y property is used to set the initial vertical position for the background image i.e. it is used to set an image at a certain position in the vertical direction. The position is relative to the positioning later, which can be set by using the CSS background-origin property.
Syntax:
background-position-y: value;
Property Value:
- top: It is used to set the image at the top position.
- center: It is used to set the image at the vertical center position.
- bottom: It is used to set the image at the bottom position.
- length: It is used to set the image’s vertical position of the given length.
- percentage: It is used to set the image’s vertical position in terms of percentage height.
- initial: It is used to set its default value. Its default value is 0%.
- inherit: It inherits this property value from its parent elements.
Example 1: The following code demonstrates the CSS background-position-y property showing the image in the center.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >CSS background-position-y Property</ title >
< style >
body {
background-position: center;
text-align: center;
background-image: url(
background-size: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: 30%;
}
h1 {
color: green;
}
img {
width: 100px;
height: 100px;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
CSS background-position-y Property
</ h3 >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the CSS background-position-y property showing the image at the bottom.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >CSS background-position-y Property</ title >
< style >
body {
background-position: center;
text-align: center;
background-image: url(
background-size: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: bottom;
}
h1 {
color: green;
}
img {
width: 100px;
height: 100px;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
CSS background-position-y Property
</ h3 >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 49
- Opera 15
- Safari 1
Last Updated :
31 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...