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.
/* 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: unset;
The background-position-y
property is specified as one or more values, separated by commas.
top
center
bottom
<length>
<percentage>
Initial value | top |
---|---|
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 | discrete |
[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#where
<length-percentage> = <length> | <percentage>
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.
<div></div>
div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; }
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 4 The definition of 'background-position-y' in that specification. | Editor's Draft | Initial specification of longhand sub-properties of background-position to match longstanding implementations. |
Desktop | ||||||
---|---|---|---|---|---|---|
background-position-y |
1 | 12 | 49 | 6 | 15 | 1 |
Two-value syntax (support for offsets from any edge) | No | 12 — 79 | 49 | 9 | No | No |
Mobile | ||||||
---|---|---|---|---|---|---|
background-position-y |
≤37 | 18 | 49 | 14 | 1 | 1.0 |
Two-value syntax (support for offsets from any edge) | No | No | 49 | No | No | No |
background-position
background-position-x
background-position-inline
background-position-block
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y