Until recently, if you needed to offset a background image from the right, there was no easy road. One of the most common tricks was to use the calc() function of CSS and do something like background-position: calc(100% - 10px) top. That worked like a charm, but there must be a way to achieve this more easily, right?

Right! Meet Background Position Edge Offset.

This new(ish) feature of CSS3 allows you to position the background relative to the specified edge, like so:

background-position: right 10px top;


background-position: right 100% bottom 5px;

The support is solid, with all browsers implementing it, even Internet Explorer starting from IE11.