position background image center bottom with some offset

Question

I would like to position to the bottom of a background image but give it some vertical offset.

Lets say

Same way we can do:

.img{
     background-position: 5px center; /* top + 5px */
}

I tried to:

.img{
     background-position: -5px center; /* bottom - 5px ?? */
}

But the image won't even be visible

How can I achieve this? (without knowing the height of the element).

• So far I fixed it applying padding (size of image) and margin (offset) to the element with postion:bottom center;

Answer 1

using :before and :after you can achieve the result(use exact location of the sprite image.)

.img{
    position: relative;
}

.img:after {
    left: 50%;
    bottom: -5px;
    content: '';
    width: 32px;
    height: 32px;
    margin-left: -16px;
    position: absolute;
    background-position: 0 0;
}

.img:before {
    left: 50%;
    top: 5px;
    content: '';
    width: 32px;
    height: 32px;
    margin-left: -16px;
    position: absolute;
    background-position: -15px -30px;
}

Answer 2

Not with CSS2, but with CSS3. Using background-position you can give a position or negative offset.

You can do something like:

JSFiddle Demo

HTML:

<div class="box"></div>

CSS:

.box {
    width:300px;
    height:300px;
    background: url(http://placehold.it/100x100) no-repeat bottom -10px right -20px;
    border:2px solid red;
}

Browser compatibility list