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

Feb 14 2014

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>

1

2

3

Checkout My Background!

</div>

The CSS:

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

1

2

3

4

5

6

.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

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