background-position-y
=====================

The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.

Try it
------

The value of this property is overridden by any declaration of the `background` or `background-position` shorthand properties applied to the element after it.

Syntax
------


```css
/\* Keyword values \*/
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/\* <percentage> values \*/
background-position-y: 25%;

/\* <length> values \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* Side-relative values \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* Multiple values \*/
background-position-y: 0px, center;

/\* Global values \*/
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;
```


The `background-position-y` property is specified as one or more values, separated by commas.

### Values

`top`

Aligns the top edge of the background image with the top edge of the background position layer.

`center`

Aligns the vertical center of the background image with the vertical center of the background position layer.

`bottom`

Aligns the bottom edge of the background image with the bottom edge of the background position layer.

`<length>`

The offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge. (Some browsers allow assigning the bottom edge for offset).

`<percentage>`

The offset of the given background image's vertical position relative to the container. A value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the *bottom* edge of the background image is aligned with the *bottom* edge of the container, thus a value of 50% vertically centers the background image.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to height of background positioning area minus height of background image |
| Computed value | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |

Formal syntax
-------------
```

background-position-y =   
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Basic example

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

#### HTML


```html
<div></div>
```


#### CSS


```css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}
```


#### Result

### Side-relative values

The following example shows support for side-relative offset syntax, which allows the developer to offset the background from any edge.

#### HTML


```html
<div></div>
```


#### CSS


```css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `background-position`
* `background-position-x`
* Using multiple backgrounds