Subscribe

CSS Offset background-position

✍️

In this tutorial we are looking at offsetting the background position by an amount of pixels. See the code exmamples in the Codepen.

7 Jun, 2020 · 2 min read

Today we will learn how to offset the CSS background-position. To do that, we will use a small calculation. We use the background-position CSS property to offset the position of a background element. Nowadays, we use a lot of fluid/responsive layouts, which can make this quite uneasy.

Offset Background-Position calculation

The CSS property accepts several syntaxes. The normal values would be: top|right|bottom|left. We can also use just center to center on all axis.

It's accessible aligning center or from the left, but aligning from the right is not always known. Let's look into aligning from the right.

background-position: right 25px bottom 25px;

We used the calc function for calculations. We can use the calc-function with background-position as well:

background-position: calc(100% - 25px) calc(100% - 25px);

As you can see in this example, it can be as easy as this.

You can offset the image position from any direction.

View the code example on Codepen

Play around with the pixel calculation to see how the live demo changes.

See the Pen CSS Offset background-position by Chris Bongers (@rebelchris) on CodePen.

Browser Support

The browser support for position offset is excellent in modern browsers. Unfortunately, it doesn't go all the way back.

CSS background-position offset support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

CSS Logos: Vue logo

22 Jun, 2022 · 3 min read

CSS Logos: Vue logo

CSS Logos: Strava logo

21 Jun, 2022 · 5 min read

CSS Logos: Strava logo

Join 1513 devs and subscribe to my newsletter