CSS background-position-y Property
Description
The background-position-y
CSS property allows you to precisely control the vertical positioning of a background image within an HTML element. By specifying a value, such as a length measurement or a percentage, you can determine where the top edge of the background image should align relative to the top edge of the element. This property complements the background-position-x property, which controls horizontal positioning. Together, they offer fine-grained control over the placement of background images, enabling designers to achieve the desired visual layout for their web pages.
- Initial value
- 0%
- Applies to
- all elements
- Inherited
- no
- 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
- Animatable
- a repeatable list
- JavaScript syntax
- object.style.backgroundPositionY
Syntax
background-position-x: top | center | bottom | <percentage> | <size>
Values
- topAligns the background to the top edge. Equivalent to writing 0 or 0%.
- centerAligns the background to the vertical center. Equivalent to 50% entry.
- bottomAligns the background to the bottom edge. Record equivalent to 100%.
- <percentage>Sets the background position as a percentage of the elements height. A value of 0% or 0 aligns the top edge of the background image to the top edge of the element. A value of 100% aligns the bottom edge of the picture with the bottom edge of the element.
- <size>Sets the position of the background in any units available for CSS - pixels (px), centimeters (cm), em, etc. relative to the top edge of the element.
Example
<div></div>
div {
width: 250px;
height: 250px;
background-color: skyblue;
background-image: url(images/icon2.png);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
}
Browser Support
The following table will show you the current browser support for the CSS background-position-y
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 49 | 15 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 49 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 20th September 2023