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
Please Login to comment...