CSS Sprite Compatibility in Firefox

Question

I have a div element that uses the css classes below. Basically, I'm creating a sprite image link that changes on hover.

.home {
    background: url('images/home.png') 0 0;
    width: 150px;
    height: 188px;
    border: none;   
}

.home:hover {
    background-position: -150px 0;  
}

When I tested it with different browsers, it seemed to work well with most browsers except for some versions of Firefox. On hover, it doesn't switch the img position. As I read from w3c for this to work in Firefox, the "background-attachment" property to "fixed". I did this and added the property to both classes and still didn't work. When I added the property, the image was centered, and whatever was not within the specified width and height were cut off.

Answer 1

This is a guess without seeing the problem, but sometimes using the background shorthand can be buggy in FF:

try :

.home {
  backround-image: url('images/home.png');
  background-position: 0 0;
  height: 188px;
  border: none;
}

.home:hover {
  background-position: -150px 0;
}