Question

I am trying to use it this way:

CSS

#sprite2 {
   background: url(../images/csg_sprite.png) no-repeat top left;
}

.collapse_down{ background-position: 0 0; width: 16px; height: 16px; } 
.collapse_up{ background-position: 0 -66px; width: 16px; height: 16px;  } 

HTML

<div id="sprite2"><span id="splink1" class="collapse_down">Defaults</span>

CHANGE by jQuery

$('#splink1').attr("class", 'collapse_up');

The problem I face is that the image is applied for the div=sprite2 and not for the span I want for.

How to fix so on the left of the text to display the sprite, and when I toggle it, to change the image to up.

Answer 1

.sprite2 {
   background: url(../images/csg_sprite.png) no-repeat top left;
   display:inline-block;
}

<div  id="splink1" class="sprite2 collapse_down"></div>Defaults

background position property applied only when id or class which includes background image added to it .