对CSS Sprite使用background-position和background-repeat

Question

Here is the demo , and here is the sprite:

I want to use the arrow in a markup, like this:

<div class="tooltip">
    The tooltip
    <span class="arrow"></span>
</div>

Setting:

background-image: url(foobar.gif);
background-position: 0 -40px;
background-repeat: none;

does not seem to work (as expected). Any workaround?

Answer 1

Do you mean:

background-repeat:no-repeat ?

Answer 2

Use height and width exactly..

for example,

background-position: 0 -40px; 
background-repeat: no-repeat;
height:32px;
width:32px;

or use the sprites generators online and they will render both images and css..

eg: http://spritegen.website-performance.org/

Answer 3

hm try this:

background: url(foobar.gif) 0 -40px no-repeat transparent;

should be work.