Quick Tip - 06: Use the Four-Value Syntax to Properly Position Background Images

February 14, 2014 | 1 Minute Read

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:

Checkout My Background!

Browser Support

ie9 and above Chrome 25 and above Safari Nightly Fire Fox 13 and above

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

Found any of this Stuff Helpful?

If you found any this helpful and want to show some love, you can always buy me a coffee!