CSS 101: How to offset background from the right or bottom

Background-position CSS property allows us to position background image starting from top left corner of a HTML element.

We are able to position either with some numeric values such as 100% and10px, or with keywords such as left and bottom. Either way, you always have to offset it from the top left corner.

If the design dictates positioning background image to bottom right corner, obviously we would use background-position: 100% 100%;

But sometimes we need an offset from the bottom right. And if you also have expanding box, it doesn’t come by default in CSS.

We are all aware that fixed height layouts are matter of history, but bare with me for a moment — with fixed width/height layouts background positioning is fairly easy. You always know where the background image will end, thus you can make it a little bit smaller in size than the element itself.

For example: if a paragraph is 300px wide, we can set the background-image in a way to leave a 10px wide empty area on the right.

First, let’s see the rule:

p {
    width: 260px;
    height: 260px;
    padding: 20px;  
    background: url(image.gif) no-repeat 0 0;
}

In this example, if we crop the background image to be 290 x 290px, you can easily achieve an effect of background image being 10px shorter and 10px thiner than the paragraph.

I agree, it’s no brainer. But keep reading.

Flexible is new fixed

With liquid or flexible layouts, dimensions of HTML elements are variable (different screen resolutions, window resizing, etc.). Say we have:

p {
    width: 100%;
    height: 100%;
    background: url(image.gif) no-repeat 100% 100%;
}

I’ve seen developers reach for another element to achieve the offset. And really, if you’re in a hurry, add a child element, offset it with a margin, and then paste the background to that inner element.

Naturally, there is a better way.

Open the background image with Photoshop, and choose Image → Canvas Size (or Command/Ctrl + Alt/Option + C)

Enter the values as shown on the Figure 2. (tip: if you check Relative, you can use mathematical operands). When you’re done, hit OK.

You should have some empty space on the right and bottom.

Save image as a GIF with transparency on and voilá – it’s always shifted 10px from the bottom and 10px from the right (resize your browser window or increase font size when you are checking the example).

At first, you might wonder where you should use this technique, but once you get your fingers on flexible layouts, you might find this useful.