CSS 'background-position-y' Property Explained

The CSS 'background-position-y' property specifies the vertical position of a background image within an element. It controls the y-coordinate (top to bottom) placement of the background image, allowing for precise alignment of the image within the vertical space of an element.

CSS 'background-position-y' Property Examples

See the Pen CSS 'background-position-y' Property by Webzstore (@webzstore) on CodePen.

The 'background-position-y' property offers detailed control over the vertical placement of background images within elements. It is indispensable for designers seeking to achieve precise visual effects and alignments. It is a crucial tool in creating visually compelling web designs.

Browser Support For 'background-position-y' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-position-y for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-position-y' Property

background-position-y: [ center | [ top | bottom ]? <length-percentage>? ]#;

background-position-y: center;       /* vertically centred */
background-position-y: 25%;          /* 25% of the free vertical space */
background-position-y: bottom 20px;  /* 20px up from the bottom edge (a side-relative value: see the second table above) */
background-position-y: 0, 100%;      /* two backgrounds, comma-separated */

Usage of the 'background-position-y' Property

Use 'background-position-y' when you want to adjust the vertical alignment of an element's background image without influencing its horizontal position. This property is useful for aligning background images to the top, center, or bottom of an element, or for specifying their vertical position with units such as pixels or percentages, enhancing the design's visual appeal and alignment.

Property Values of the 'background-position-y' Property

• Value: Defines the vertical position of the background image using keywords (top, center, bottom), percentages (e.g., 50%), or exact measurements (e.g., 20px). A keyword can be combined with an offset from that edge, such as bottom 20px; these side-relative values are tracked separately from the basic property, and the second compatibility table above shows when each browser supports them, so check it before relying on that syntax. Percentages refer to the height of the background positioning area minus the height of the image, so 0% aligns the top edges and 100% aligns the bottom edges.
• Initial: Resets the 'background-position-y' to its default value (0%), which aligns the background image to the top edge of the background positioning area.
• Inherit: The element inherits the 'background-position-y' value from its parent element.