Positioning background from element’s bottom-right corner

When coding websites’ templates, it’s often needed to position a background image with an offset from right or bottom edge of an HTML element. A good while the only option to achieve this was to embed empty space of needed size into the image itself since CSS had no such feature. It was not enough flexible (resaving image was needed to change the offset), and image-file size and browser-memory footprint were bigger than without the offset.

Situation is changing thanks to CSS3 “Backgrounds and Borders” Module, which status has rather recently switched to Candidate Recommendation. The module provides an updated syntax for background-position CSS-property that now allows specifying arbitrary offsets from bottom and/or right edges of element:

background-position: bottom 10px right 20px;

In the example, the image will be positioned from bottom-right corner of the element while having offsets of 10 and 20 pixels from bottom and right edges of the element, respectively.

Formal description in the specification:

If three or four values are given, then each percentage or length represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. If three values are given, the missing offset is assumed to be zero.

CSS3 syntax of background-position is already supported by Opera 11+ and IE9+. The feature will also be available in Firefox as of version 13, which is planned to be released early in June. For WebKit (Chrome, Safari), there is a (not accepted yet) patch.

Update: at May 2013, CSS3 syntax of background-position is supported by current stable versions of all major browsers.