Search code examples
cssfirefoxgoogle-chromesprite

Firefox Sprite Sheet Image Not Showing Up

I'm having an issue getting this CSS for a sprite sheet to work on Google Chrome.

image.emo {
  width: 19px;
  height: 19px;
}

image#smile {
  background: url(img/diceSprite.png) 0 0;
}

image#bigsmile {
  background: url(img/diceSprite.png) -19px 0;
}

<img class="emo" id = "smile" src="img/blank.gif" 
  width="1" height="1" alt=":)" title=":)" />
<img class="emo" id = "bigsmile" src="img/blank.gif" 
  width="1" height="1" alt=":D" title=":D" />
Solution

  • change

    image.emo {
  width:19px;
  height:19px;
}

    to

    img.emo {
  width:19px;
  height:19px;
}

    and the others follow a similar pattern. The element selector is img, not image