Edit in JSFiddle

<h1>CSS-Sprite</h1>

<p>
Bilden visas nedan.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Dice-faces_32x32.jpg"/>
<p>
En tom oordnad lista där en bit av bilden ovan visas som en bakgrundsbild.
</p>

<ul class='dice'>
<li class='dice-1'></li>
<li class='dice-2'></li>
<li class='dice-3'></li>
<li class='dice-4'></li>
<li class='dice-5'></li>
<li class='dice-6'></li>
</ul>

/**
 * CSS sprite for a dice with six faces.
 *
 */
ul.dice {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
ul.dice li {
  display: inline-block;
  padding: 0;
  margin: 0 4px 0 0;
  width: 32px;
  height: 32px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/2/2e/Dice-faces_32x32.jpg) no-repeat;
}
 
ul.dice li.dice-1 { background-position: -160px 0px; }
ul.dice li.dice-2 { background-position: -128px 0px; }
ul.dice li.dice-3 { background-position:  -96px 0px; }
ul.dice li.dice-4 { background-position:  -64px 0px; }
ul.dice li.dice-5 { background-position:  -32px 0px; }
ul.dice li.dice-6 { background-position:    0px 0px; }