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>
Advertisements