CSS Sprites - using just one piece of an image as a background for part of an element

Question

I use the CSS Sprite Technique with a background image that looks something like this:

The CSS code for the icons:

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

My icons can be used like this:

<div class="icon warning"></div>

I want to put some text inside my icons like:

<div class="icon warning">There is a warning on this page</div>

But the problem is that the background image covers the entire text area:

The question is: how can I use only part of an image as a background image for part of my element?

Notes:

• setting width to 16px for div.icon doesn't help.

Answer 1

Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.

div.icon:before {
    content: "";
    background-color: transparent;
    background-image: url("/images/icons.png");
    display: inline-block;
    height: 16px;
    vertical-align: text-top;
    width: 16px;
}

div.icon:not(:empty):before {
    margin-right: 4px;
}

div.icon.attenuation {
    background-position: 0 0;
}

Answer 2

You have two ways:

1)Your markup must be like this:

<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}

2)You must change the image. Icons in the image must be below the another