search

mgrubinger / blog

https://www.grooovinger.com/
MIT License
0 stars 0 forks source link

CSS Background Position Offsets #31

Open mgrubinger opened 1 year ago

mgrubinger commented 1 year ago

short: Improved positioning of CSS background images

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