Positioning background with offset from element’s bottom-right corner
- Published:
When coding websites’ templates, it’s often needed to position 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 image itself since CSS had no such feature. It was not enough flexible (resaving image was needed to change an offset), and image file size and browser memory-footprint were bigger than without offset.
Situation is changing thanks to CSS3 “Backgrounds and Borders” Module, which status is rather recenly switched to Candidate Recommendation. The module provides updated syntax for background-position CSS-property that now allows specifying arbitrary offsets from right and/or bottom edges of an element:
background-position: bottom 10px right 20px
In the example, image will be positioned from right bottom corner of an element while having offsets of 10 and 20 pixels from bottom and right edges of the element, respectively.
CSS3 syntax of background-position is already supported by Opera 11+ and IE9+. The feature will also get 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.