CSS background-position edge offsets

Overview

Allows CSS Background images to be positioned relative to the edge of a box using offsets specified in the three to four value syntax.

Formal Definition

Specifications

CSS Backgrounds and Borders Module Level 4 # background-position

Syntax

/* Keyword values */
 background-position: top;
 background-position: bottom;
 background-position: left;
 background-position: right;
 background-position: center;
 /* <percentage> values */
 background-position: 25% 75%;
 /* <length> values */
 background-position: 0 0;
 background-position: 1cm 2cm;
 background-position: 10ch 8em;
 /* Multiple images */
 background-position: 0 0, center;
 /* Edge offsets values */
 background-position: bottom 10px right 20px;
 background-position: right 3em bottom 10px;
 background-position: bottom 10px right;
 background-position: top right 10px;
 /* Global values */
 background-position: inherit;
 background-position: initial;
 background-position: revert;
 background-position: unset;

Code snippets

index.html

Source:index.html

background-position.htm

Source:background-position.htm

Browser Compatibility