how to position a css sprite as background for another class

Question

Sorry if the layout of the question seems weird, I've wrote this question now for about 10 times over and over again in this editor, resulting always in getting an error message "unformatted code found etc." - so I removed all the code and placed picture examples. (2 hours for a simple question)

---

Hello folks! I do have a .png image, containing several icons that works as CSS Sprite. The creation of each CSS class for that is no problem as I use a generator for that. (works like a charm)

The problem is, that I want to use, for example: The created .iconInfo_32 class, as background property for another css class.

What I want to achive?

Simple said, a custom css - messagebox, with an icon on the left side. The icon itself is in original a sprite containing multiple icons. That's where the problem starts.

What I have

The Icons

(thats one PNG)

The Icon I want to use

How the result should look like

How it actually looks

Use another div, in a div

Yes, that would work - but I'd like to have "one" css class, without the need to put always a div, into another div, say where the position should be and so on - also I had problems with the position of the div.

I've provided a source example, hopefully this will help being able to understand my question and my goal. Excuse me if the layout of my question is unusual and unpleasent, I would have done it in another way, but the editor just won't let me

Source

HTML

<div class="warning_without_sprite">
    This is a DIV container<br />
    showing an error message with the use of 'close_32.png' as Icon. (No Sprite)
</div><br /><br /><br /><br />
<div class="warning_with_sprite">
    This is a DIV container<br />
    showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>

CSS

<style type="text/css">
  .iconInfo_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -0px -0px; }
  .iconOk_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -32px -0px; }
  .iconAdd_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -64px -0px; }
  .iconClose_2_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -96px -0px; }
  .iconClose_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -128px -0px; }
  .iconDelete_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -160px -0px; }
  .iconDownload_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -192px -0px; }
  .iconHelp_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -224px -0px; }

.warning_without_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/close_32.png');
}
.warning_with_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background: #FFBABA url('images/icons.png') no-repeat -128px -0px;
}
</style>

>> Download as RAR. <<

Answer 1

It's because you've set it as a background-image across the whole <div> element and because the sprite contains multiple images it will show them all. You can't specify how much of that sprite to show.

You'll have to insert a <span> element into your <div>. This will allow you to specify the size of the span and position it relative to your div container.

<div class="warning">
    <span class="warning_with_sprite"></span>
    This is a DIV container<br />
    showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>

CSS:

.warning_with_sprite {
    position:absolute; left:16px; top:16px;
    background-repeat: no-repeat;
    background-position: 10px center;
    width:20px; height:20px; 
    background: url('http://i5.minus.com/id1CYq.png') no-repeat -133px -2px;
}
.warning { 
    float:left;
    color: #D8000C;
    border: 1px solid;
    position:relative;
    padding: 10px 10px 10px 50px; 
    background: #FFBABA; 
}

See a demo here

Note: you'll have to change the image back to your sprite and the top, left, height and width properties will have to change inline with your requirements