The Background Position Compendium

Keyword only background positions are to be declared by their vertical position and then their horizontal position (ie "bottom right") according to W3Schools. Background positions containing a numeric or percentage are to be declared the opposite way (xpos ypos). So what if you want to combine keyword values with percentage or numeric ones?

See for yourself, or read more in my blog post.

Our Heroic Test Subject

Red Fish

Keyword Only

background-position:bottom right;
background-position:right bottom;
background-position:bottom;
background-position:right;

Keyword Only with Center

background-position:bottom center;
background-position:center bottom;
background-position:right center;
background-position:center right;

Keyword & Percentage

background-position:bottom 80%;
background-position:80% bottom;
background-position:right 80%;
background-position:80% right;
background-position:center 80%;
background-position:80% center;

Keyword & Pixels

background-position:bottom 100px;
background-position:100px bottom;
background-position:right 100px;
background-position:100px right;
background-position:center 100px;
background-position:100px center;

Numeric Only

background-position:80% 100px;
background-position:100px 80%;
background-position:80%;
background-position:100px;