# background-position-y property

The `background-position-y` property specifies a vertical position of an element’s background image.

The property can take the following values: `top`, `center`, `bottom`, and you can also specify the background position in percentages or pixels.

## Syntax

`selector { background-position-y: value; }`

## Example

Let's arrange the background image at the top vertically:

`<div id="elem"></div>` `#elem { background-position-y: top; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image in the center:

`<div id="elem"></div>` `#elem { background-position-y: center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Now let’s set the position for the background as a percentage:

`<div id="elem"></div>` `#elem { background-position-y: 80%; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## See also

- the `background` property
  that is a shorthand property for a background
- the `background-position-x` property
  that specifies a background position horizontally

← →
↑
en ru