CSS background-position-y Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

Interactive Demo

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
Edge Chrome Firefox Opera Safari
12149151
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1849141137

Last updated by CSSPortal on: 1st January 2024