Please help.

I want to replace images in my index.css with a CSS sprite. I made a sprite with a generator. Here is a bit of code from it.
Please help~
.sprite-hover{ background-position: 0 0; width: 14px; height: 35px; }
.sprite-left-bg{ background-position: 0 -85px; width: 232px; height: 1px; }

#container li {
background: url(csg-4f2d90ebaef03.png) no-repeat top left;
This is the former image in the css file:
.button_menu ul li a:hover{background:url(../images/hover.jpg); color:#000;}
How do I replace this hover.jpg image with the sprite?

I have read a bunch of tutorials, but they all say something about the html. Which I don't understand since the images in the current css never made a reference to the html before. The whole index.css does but not individual images.