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 |
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 of |
Formal syntax
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 10px;
}
Result
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # background-position-longhands |
Browser compatibility
BCD tables only load in the browser