background-image css, image wont show up
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&开发者_Go百科gt;
<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;
}
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.
精彩评论