CSS Background Position Offsets

2023-03-14 / mgrubinger / 0 reactions

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