background-image css, image wont show up

Question

I am making a yatzy game, and trying to put the dices in each div box but it wont show up.

You can wath my code at jsfiddle: http://jsfiddle.net/bneRe/

OR

Here is the HTML:

<div id="dice" title="Click on a dice to lock or unlock it">
   <div class="dice1"><div></div></div>
   <div class="dice2"><div></div></div>
   <div class="dice3"><div></div></div>
   <div class="dice4"><div></div></div>
   <div class="dice5"><div></div></div>
   <div class="dice6"><div></div></div>
</div>

And here is the CSS:

#dice {
  height: 40px;
  width: 240px;
}


#dice div {
  height: 40px;
  width: 40px;
  float: left;
}

.dice1 { background-image:url('http://imm.io/9YdM.jpg');
         background-position: 0 0;    
}
.dice2 { background-image:url('http://imm.io/9YdY.jpg');
         background-position: 0 0;
}
.dice3 { background-image:url('http://imm.io/9Ye4.jpg');
         background-position: 0 0;
}
.dice4 { background-image:url('http://imm.io/9Ye9.jpg');
          background-position: 0 0;
}
.dice5 { background-image:url('http://imm.io/9Yed.jpg');
         background-position: 0 0;
}
.dice6 { background-image:url('http://imm.io/9Yef.jpg');
         background-position: 0 0;
}

Answer 1

The URLs you are providing aren't actual images. They are pages with images. Use: http://i.imm.io/9YdY.jpeg , ..., etc instead:

#dice {
  height: 40px;
  width: 240px;
}


#dice div {
  height: 40px;
  width: 40px;
  float: left;
}

.dice1 { background-image:url('http://i.imm.io/9YdM.jpeg');
         background-position: 0 0;    
}
.dice2 { background-image:url('http://i.imm.io/9YdY.jpeg');
         background-position: 0 0;
}
.dice3 { background-image:url('http://i.imm.io/9Ye4.jpeg');
         background-position: 0 0;
}
.dice4 { background-image:url('http://i.imm.io/9Ye9.jpeg');
          background-position: 0 0;
}
.dice5 { background-image:url('http://i.imm.io/9Yed.jpeg');
         background-position: 0 0;
}
.dice6 { background-image:url('http://i.imm.io/9Yef.jpeg');
         background-position: 0 0;
}

After you make that change, note that each div isn't big enough to hold a full die's image. The images are 111x111 pixels, and your divs are 40x40 pixels.