W3docs
en
Log in

CSS background-position-y Property

The background-position-y CSS property specifies the vertical position of a background-image. See examples and try them yourself.

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

One or more values can be specified separated by commas.

Info

Negative values are valid.

Initial Valuetop
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.backgroundPositionY = "bottom";

Syntax

CSS background-position-y values

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

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

CSS background-position-y code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      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>
Try it Yourself »

Result

CSS background-position-y top

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

CSS background-position-y bottom example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      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>
Try it Yourself »

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      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>
Try it Yourself »

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      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>
Try it Yourself »

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      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>
Try it Yourself »

Values

ValueDescription
topSpecifies the alignment of the top edge of the background image with the top edge of the background position layer.
centerSpecifies the alignment of the center of the background image with the center of the background position layer.
bottomSpecifies the alignment of the bottom edge of the background image with the bottom of the background position layer.
lengthSpecifies the vertical offset of the background image from the top edge of the background positioning layer.
percentageSpecifies the vertical offset of the background image relative to the container. 0% aligns the top edge of the background image with the top edge of the container, 100% aligns the bottom edge with the bottom edge of the container, and 50% vertically centers the background image.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

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