CSS background-position-y Property

CSS background-position-y

The background-position-y property in CSS specifies the vertical position of a background image. It allows developers to align the background image along the y-axis with precision, enhancing layout flexibility.

Syntax of background-position-y

</>

Copy

background-position-y: value;

Values

Value	Description
`top`	Positions the background image at the top along the y-axis.
`bottom`	Positions the background image at the bottom along the y-axis.
`center`	Positions the background image at the center along the y-axis.
`y%`	The top side is `0%`, and the bottom side is `100%`. The percentage value refers to the height of the background positioning area minus the height of the background image.
`ypos`	Specifies the vertical distance from the top side. Units can be pixels (e.g., `10px`) or any other CSS units.
`ypos offset`	A two-value syntax supported only in Firefox and Safari. The first value is `top` or `bottom`, and the second value is the vertical offset from that side. Units can be pixels or any other CSS units.
`initial`	Sets the property to its default value (`0%`).
`inherit`	Inherits the value from the parent element.

Default Value

0%

Examples for background-position-y

Using the CSS background-position-y Property

The following examples demonstrate how to use the background-position-y property to position the background image vertically.

</>

Copy

/* Position background at the top */
.element {
  background-image: url('https://www.tutorialkart.com/img/lion_small.jpg');
  background-position-y: top;
}

/* Position background at the center along the y-axis */
.element {
  background-image: url('https://www.tutorialkart.com/img/lion_small.jpg');
  background-position-y: center;
}

/* Position background 30px from the top */
.element {
  background-image: url('https://www.tutorialkart.com/img/lion_small.jpg');
  background-position-y: 30px;
}

Example for Center Background Alignment along Y-axis

Below is an example demonstrating how to align a background image at the bottom using background-position-y: center:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/lion_small.jpg');
    background-repeat: no-repeat;
    background-position-y: center;
    display: flex;
    justify-content: right;
    align-items: end;
    color: black;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

  <h1>Background on Y-Axis at Center</h1>
  <div class="box"></div>

</body>
</html>

Example for Background Alignment along Y-axis at 0

background-position-y: 0;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/lion_small.jpg');
    background-repeat: no-repeat;
    background-position-y: 0;
    display: flex;
    justify-content: right;
    align-items: end;
    color: black;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

  <h1>Background on Y-Axis at 0</h1>
  <div class="box"></div>

</body>
</html>

Example for Background Alignment along Y-axis at 25%

background-position-y: 25%;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/lion_small.jpg');
    background-repeat: no-repeat;
    background-position-y: 25%;
    display: flex;
    justify-content: right;
    align-items: end;
    color: black;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

  <h1>Background on Y-Axis at 25%</h1>
  <div class="box"></div>

</body>
</html>

Browser Support

The background-position-y property is supported in most modern browsers, but the two-value syntax is only supported in Firefox and Safari. Below is a compatibility table:

Browser	Version
Chrome	1.0
Edge	12.0
Firefox	49.0
Safari	1.0
Opera	15.0

Browser (Two-Value Syntax)	Version
Chrome	Not supported
Edge	Not supported
Firefox	49.0
Safari	15.4
Opera	Not supported

TutorialKart

CSS background-position-y Property