Div with sprite image

Question

I have three images in a single png made ​​by the sprite method and i want a table inside of the 3rd image.

I want to put the 1st image(maquina_bola) over the 2nd image(maquina_vidro) and the 2nd over the 3rd(maquina_azul) without change the position of the table.

I can do it with separate images files, as in the example code. But using the same code with sprite images, the images are not overlapped.

Someone can help me?

<div class="maquina maquina_azul">
                        <div class="maquina_vidro"></div>
                        <div class="maquina_bola"></div>
                        <div style="padding-top:250px; padding-left:20px;">

                        </div>
                    </div>

Fiddle 1 - sprint image

And must become like this

Fiddle 2- Perfect

Answer 1

Best way to sprint image is:

Sprite Cow - Generate CSS for sprite sheets

And it also works in offline mode ;)

Answer 2

There you go: http://jsfiddle.net/Yy3zZ/1/

1) The order of the images was wrong. The ball has to be behind the bowl.
2) The images have to overlap, so their position must be set to absolute
3) The container (_azul) has to be relative positioned
4) You then have to tweak the left and top properties of each image so they are in the correct position.

.maquina_azul{ 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -2px -4px;
    width: 290px; height: 710px;
    position:relative;
    margin-top:40px;
}

.maquina_bola{ 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -60px -768px;
    width: 176px; height: 176px;
    position:absolute; 
    left:60px; top:-35px;
}

    .maquina_vidro { 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -378px -1610px;
    width: 224px; height: 110px;
    position:absolute; 
    left:35px; top: 43px; 
}