After writing my post Use CSS Calc to Properly Position Background Images I had some folks point out that you can now use the new Four-Value syntax for the background-position property to achieve the same effect. I was absolutely blown away when I saw that this was finally possible. I'm mean, this just makes sense and it's something that I've wanted for years.

Here’s How You Use it

The Four-Value syntax supports offsets from any edge, in this case I’m using right, bottom.

The HTML:

<div class="item">
    Checkout My Background!
</div>

The CSS:

.item {
    background-image: url(graphic.svg);
    background-position: right 20px bottom 20px;
    background-repeat: no-repeat;
    height: 170px;
}

The Demo:

Browser Support

The Four-Value syntax has pretty good browser support working in all modern browsers with the exception of Safari. From what I’ve been able to find it works in Safari Nightly but is not yet supported in safari mobile or android mobile. Although, I’ve tested it in Safari mobile and it appears to work just fine.

Sources

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-position