Are you talking about using "sprite" images (i,.e. multiple images in one image)?
If so then when you first create your sprite image in your paint package you need to note the width and height of all the different images in the sprite and then note all the x,y positions of the images. This should be easy as most simple paint packages have this facility.
Once you know that an image is say 100px x 50px and located at x,y co-ordinates of
(200px, 300px) the you can find that image by using the background property like so:
As you can see the numbers I have used are negative because in effect we have to drag the image into the top left corner so that we only show the image we want. The image we want is actually 200px from the left of the big image so we drag the background to the left by -200px and that makes the left edge of the image start flush with our element.
background:url(images/sprite.png) no-repeat -200px -300px;
We then do the same for the y co-ordinate as the image is 300px from the top of the big image and we therefore need to drag the background back upwards by 300px until the image is flush with the top of our element.
So the basics are find the width and height of your image and then find the x and y positions relative to the top left corner of the main sprite. Then just make the numbers negative and the required image will sit exactly where it needs to be.
Think of the background of the element as a window that you look through. There is more outside the window than you can see and to see someone standing to the right of the window you would need to ask them to walk back towards the window a bit (e.g. minus ten steps).