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:

The CSS:

The Demo:

Checkout My Background!

Browser Support

ie9 and aboveChrome 25 and aboveFire Fox 13 and aboveOpera 10.5 and aboveSafari Nightly

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

Comments

  • I did a bit more browser testing today & discovered that Safari 7 (desktop) and Safari on iOS 7 both now support this new syntax! Unfortunately the default Android browser still fails miserably.