CSS Background Position Offsets

You can set an offset for CSS background-position to specify the position of a background image from right and/or bottom boundaries, like this:

.my-element {
  background-image: url('path/to/image.png');
  background-position: right 10px bottom 5px; 

This will place the image in the bottom-right corner, but move it 10px to the left and 5px towards the top. Kinda like setting a transform: translateX(-10px, -5px) (which you can’t for background images).

So far I’ve only ever used right bottom or a percentage/pixel based position for background images, but background offset comes in handy when making sure a flush right or bottom background-icon is positioned exactly where you need it.

Also see css-background-offsets on caniuse