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!

☕ Buy a Coffee

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

background-position-y: left;

background-position-y: center;

background-position-y: right;

background-position-y: 3.5rem;

background-position-y: 35%;

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

HTML

<div></div>

CSS

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;
}

Result

Editor