CSS for my ZoomHandlers as shown

I have a CSS for my ZoomHandlers as shown

.zoomHandle { width: 10px; height: 55px; }

Please see the Image of the Zoomhandlers on the chart here http://www.tiikoni.com/tis/view/?id=74ce68f

What i want to have is that , Left and Right Arrow marks on the Left and Right Zoom handlers on it , as shown here

http://www.tiikoni.com/tis/view/?i开发者_JAVA技巧d=bab7819

I have tried adding background-image:("Test.png"); , but it did not got shown

Any ideas ??

---

Here is the solution. Css Sprites

You ask How?In the tutorial you see how you can display a part of a large image that you tell it zoom

<ul id="container">
<li id="image"></li>
</ul>

<style type="text/css">
#container{
position:relative;
width:400px;
height:200px;
background-image:url("background.jpg");
overflow:hidden;
}

#image{ 
position:relative;
width:1024px;
height:200px;
left:-100;
}
</style>

and you can have two button and with jquery increase or decrease left position of #image