Quick Tip - 02: Use CSS Calc to Properly Position Background Images

January 17, 2014 | 1 Minute Read

If you would have asked me about the CSS Calc function six months or so ago I would have said "What's That?". But luckily for me I stumbled across some blog post highlighting the coolest new CSS stuff that's available for us to use and CSS Calc was one of them. It's really a pretty useful item to have at our disposal.

calc(expression)

It allows you to do math without the need of a preprocessor. With CSS Calc your imagination is the only limit to what you can do. One of my favorites is that you can use CSS Calc to properly position background images based off of the bottom right corner. Without Calc this just isn’t possible unless you add extra blank space to the image or something.

The HTML:

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

The CSS:

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

The Demo:

Checkout My Background!

Browser Support

ie9 and above Chrome 31 and above Fire Fox 25 and above Safari 7 and above

The CSS Calc function has good browser support working in all modern browsers. Not supported in Internet Explorer 8 and below.


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!