Home/ Questions/Q 6573655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:09:39+00:00

I have a div element that uses the css classes below. Basically, I’m creating

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Oops, it looks like I forgot to add the DOCTYPE tag at the beginning at the file, which contributed to the thing not working in FF.

    Added

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    and it worked!

    • 0