CSS background-position-y Property

The background-position-y property sets the vertical position for each background.

One or more values can be specified separated by commas.

Negative values are valid.
Initial Value top
Applies to All elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.backgroundPositionY = "bottom";

Syntax

background-position-y: top | center | bottom | length | percentage | initial | inherit;

Example of the background-position-y property with the "top" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 50%;
      }
      body {
        padding-top: 30px;
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: top;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>

Result

CSS background-position-y bottom

Example of the background-position-y property with the "bottom" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 50%;
      }
      body {
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>

Example of the background-position-y property with the "center" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 50%;
      }
      body {
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>

Example of the background-position-y property with the "length" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 50%;
      }
      body {
        padding-top: 30px;
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: 90px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>

Example of the background-position-y property with the "percentage" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 50%;
      }
      body {
        padding-top: 30px;
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: 70%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>

Values

Value Description
top Specifies the alignment of the top edge of the background image with the top edge of the background position layer.
center Specifies the alignment of the center of the background image with the center of the background position layer.
bottom Specifies the alignment of the bottom edge of the background image with the bottom of the background position layer.
length Specifies the offset of the given background image's left horizontal edge from the background position layer's left horizontal edge.
percentage Specifies the offset of the background image's vertical position relative to the container. 0% aligns the left edge of the background image with the left edge of the container, and 100% aligns the right edge of the background image with the right edge of the container, and 50% horizontally centers the background image.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
4.0+ 49.0+ 3.1+ 15.0+

Practice Your Knowledge

What is the function of the 'background-position-y' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?