Today we are going to look in the
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 permalink
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.
Browser Support permalink
The browser support for offset is excellent in a modern browser, unfortunately doesn't go all the way back.