I cannot get my css sprite to show - css-sprites

Question

I have set of icons that are for hotel amenities and I am trying to use CSS sprite to show them on my page.
This is what I have for html
<div class="sprite">
<ul id="amenities">
<li class="bathtub"></li>
<li class="shower"></li>
<li class="next"></li>
<li class="tv"></li>
<li class="safe"></li>
</ul>
</div>
my css
.amenities { position: relative; }
.amenities li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
.bathtub { background: url('graphics/icons.png') no-repeat 0 0; width: 60px; height: 60px;}
.shower { background: url('graphics/icons.png') no-repeat -61 0; width: 60px; height: 60px;}
only the first icon shows and the second one doesnt.
jsfiddle
how I need it to look

Answer 1

You haven't set any units on the background position. Setting this to any type of unit will make it work. Zero is a value that is an exception to this rule.
shower { background: url('graphics/icons.png') no-repeat -61px 0; width: 60px; height: 60px;}
See: https://jsfiddle.net/kbrbc62h/
EDIT:
In response to your recent comment, see: https://jsfiddle.net/Ls8wLsa6/
Elements like li, ul, h*, and div have a display:block by default. This means these elements will take up an entire line. We can set a specified width, but even still the container will be placed on a new line. By changing the li elements to use inline-block, we are able to cram them on to one line. Since the ul has a fixed width, every 3rd element will appear on a new line.
We use vertical-align:top; to align the li content to the top of the container, and then adjust the p tag to display the text in the center with no margin.
HTML:
<div class="sprite">
<ul id="amenities">
<li><div class="bathtub"></div><p>Bath</p></li>
<li><div class="shower"></div><p>Shower</p></li>
<li><div class="kitchen"></div><p>Kitchen</p></li>
<li><div class="bathtub"></div><p>Bath</p></li>
<li><div class="shower"></div><p>Shower</p></li>
<li><div class="kitchen"></div><p>Kitchen</p></li>
<li><div class="bathtub"></div><p>Bath</p></li>
<li><div class="shower"></div><p>Shower</p></li>
<li><div class="kitchen"></div><p>Kitchen Long</p></li>
</ul>
</div>
CSS:
#amenities {
width:320px;
}
.bathtub {
background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat 0 0; width: 60px; height: 60px;
}
.shower {
background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat -61px 0; width: 60px; height: 60px;
}
.kitchen {
background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat -122px 0; width: 60px; height: 60px;
}
.sprite ul li {
list-style-type:none;
display:inline-block;
vertical-align:top;
margin:10px;
width: 60px;
}
.sprite ul li p {
text-align:center;
margin:0;
}