Using background-position with background-repeat for a CSS sprite

He开发者_Go百科re 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?

Do you mean:

background-repeat:no-repeat ?

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/

hm try this:

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

should be work.