Today we are going to look in the CSS background-position rule.
We use the background-position to offset position a background in an element. Nowadays, we use a lot of fluid/responsive layouts, which can make this quite uneasy.
CSS Background Position
The 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 easy aligning center or from the left, but aligning from the right can is not always known, so let's look into aligning from the right.
background-position: right 25px bottom 25px;
The other day we used the calc function we can use that inside background-position as well:
background-position: calc(100% - 25px) calc(100% - 25px);
As you can see, it can be as easy as this.
You can offset an image from any of the four corners of the element.
Please feel free to view and edit on Codepen.
See the Pen CSS Offset background-position by Chris Bongers (@rebelchris) on CodePen.
Browser Support
The browser support for offset is excellent in a modern browser, unfortunately doesn't go all the way back.
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
Top comments (0)