Combine the background image position in the element with position in the image sprites

Question

I have an element (h3) and I want to set background position to the right, it's easy:

background: url('/images/icon-popular.png') no-repeat right center;

But I want to use .png file where I have a lot of other icons (Image Sprites), usually I do:

background-image: url('/images/icons-info.png');
background-position: 0 -110px;

How can I merge the background-position in the file with "right center" position in the element?

Answer 1

Here's a similar thread like yours: Using Css Sprites and background position

But personally what I'll do to achieve this effect to use a pseudo selector like h3:before, style it to match the size of the icon in the sprite and position that element to the right of the h3.

h3 {
    background-color: #faa;
    padding:5px 10px;
}

h3:before {
    float: right;
    display: block;
    content: "";
    width: 35px;
    height: 23px;
    background: transparent url('https://jsfiddle.net/img/logo.png') no-repeat left top;
}

https://jsfiddle.net/3sdj4tga/

The possible issue with your approach is if an h3 takes more space than what you have allotted in your sprite, the other parts of the image will show up giving an undesirable effect.