background-position-y
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
* Some parts of this feature may have varying levels of support.
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.
The value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it.
Try it
background-position-y: top; background-position-y: center; background-position-y: 25%; background-position-y: 2rem; background-position-y: bottom 32px; <section class="display-block" id="default-example"> <div class="transition-all" id="example-element"></div> </section> #example-element { background-color: navajowhite; background-image: url("/shared-assets/images/examples/star.png"); background-repeat: no-repeat; height: 100%; } Syntax
/* 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 background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.
HTML
<div></div> 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
<div></div> 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 Module Level 4 # background-position-longhands |