CSS: How to Position a Background Image X Pixels from the Right Edge

Say you have a background image that you want to position with background: in CSS.

This is the basic code:

url(my-bg-img.png) no-repeat right center

However, that will leave you with your image butted right up against the right side. So look at this button, for example (the background image is the + icon):

an example of a button with the background image rammed up against the right side

Using CSS’s calc() functionality, we can back that + graphic up a bit:

url(my-bg-img.png) no-repeat calc(100% - 1rem) center

Which gives us:

an example of a button with the background image positioned a bit off of the right edge

Up Next: All of the PHP Date & Time Formats / Characters