CSS - background-position-y Property
The background-position-y property sets the initial vertical position of the element's background image. The position of the image is relative to the value set by background-origin property.
The value of background-position-y gets overridden if background or background-position declarations are made on the element after it.
Possible Values
The value for this property can be specified as one or more values, separated by commas.
top: Top edge of the background image is aligned with the top edge of background position layer.
center: Center of the background image is aligned with the center of the background position layer.
bottom: Bottom edge of the background image is aligned with the bottom edge of background position layer.
<length>: It is the offset of the horizontal edge of background image from the background position layer's top horizontal edge.
<percentage>: It is the offset of the vertical position of the background image relative to the containing element.
0%: top edge of the background image is aligned with top edge of the container.
100%: bottom edge of the background image is aligned with bottom edge of the container.
50%: vertically centered background image.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundPositionY = "top 50px";
CSS background-position-y - top Value
Here is an example where the image is positioned vertically on top:
<html> <head> <style> .position-y-top { background-image: url('images/tutimg.png'); background-position-y: top; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="position-y-top"></div> </body> </html>
CSS background-position-y - bottom Value
Here is an example where the image is positioned vertically at bottom:
<html> <head> <style> .position-y-bottom { background-image: url('images/tutimg.png'); background-position-y: bottom; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="position-y-bottom"></div> </body> </html>
CSS background-position-y - center Value
Here is an example where the image is positioned vertically in center:
<html> <head> <style> .position-y-center { background-image: url('images/tutimg.png'); background-position-y: center; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="position-y-center"></div> </body> </html>
CSS background-position-y - <length> Value
Here is an example where the image is positioned vertically using a length value:
<html> <head> <style> .position-y-length { background-image: url('images/tutimg.png'); background-position-y: 100px; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="position-y-length"></div> </body> </html>
CSS background-position-y - <percentage> Value
Here is an example where the image is positioned vertically using a percentage value:
<html> <head> <style> .position-y-percent { background-image: url('images/tutimg.png'); background-position-y: 80%; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="position-y-percent"></div> </body> </html>
To Continue Learning Please Login
Login with Google