background-position-x & background-position-y

Overview

The background-position-x-y CSS longhand properties help you to define the x or y positions of the background image separately.

Formal Definition

Specifications

CSS Backgrounds and Borders Module Level 4 # background-position-longhands

Syntax

/* 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: revert;
 background-position-y: unset;

Code snippets

index.html

Source:index.html

short-hand.html

Source:short-hand.html

Browser Compatibility