We want to position a background image with offsets from a different corner than the top-left one, such as the bottom right. In CSS 2.1, we could only specify offsets from the top-left corner or keywords for the other three corners. However, we often want to leave some space (akin to padding) between the background image and the corner it’s on.
On browsers that don’t support the extended background-position syntax, the background image will be stuck on the top-left corner (the default position) and will look awful, not to mention it will render the text unreadable. Providing a fallback is as easy as including a good ol’ bottom right position in the background shorthand.
One of the most common cases for wanting to apply offsets from a corner is to make the background image follow padding.
We want to position our background image 10px from the bottom and 20px from the right side. However, if we think of it in terms of offsets from the top-left corner, we basically want an offset of 100% - 20px horizontally and 100% - 10px vertically. Thankfully, the calc() function allows us to do exactly that sort of calculation and it works perfectly with background-position.