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;
}