Making a background image hover effect work properly in Internet Explorer 6

Subscribe / Follow

Blog / Web Design / Making a background image hover effect work properly in Internet Explorer 6

... New Photos

Making a background image hover effect work properly in Internet Explorer 6

4 February 2008

Earlier today while i was working on a new menu style, i came across a weird bug in IE 6 wherein a background-image for a hover effect just would not disappear even when am not hovering over the link that was suppose to cause the effect.

So after spending what seems to be like an hour trying to figure out what was causing the problem..... and finally i added background-repeat: repeat-x; in to my CSS file and that seems to have solved my problem.

Before

.menu        { background-image: image.png; }

.menu:hover  { background-image: hover-image.png; }

After

.menu        { background-image: image.png; }

.menu:hover  { background-image: hover-image.png; background-repeat: repeat-x; }

So it turns out that i must have background-repeat: repeat-x; in order to make that hover effect work properly in IE6. Very weird indeed.

Comments

Ted from Europe wrote:

25 March 2008 (4 years ago)

Your after CSS has hover.png in it twice.
Good to know about the repeat-x though, thanks :-)
Lamin Barrow from Gambia, Africa wrote:

26 March 2008 (4 years ago)

Hi Ted,
I have just made changes to the article. Thanks for pointing that out to me. Good catch :)
Roca from Serrekunda, Gambia wrote:

5 May 2008 (4 years ago)

Good Point Lamin... it woulda take me days to figure out such issues...lol
Anonymous from Georgia, United States wrote:

12 June 2008 (4 years ago)

thank you so much I have been driving my self crazy trying to get the hover thing to work. My proablem was similar. The background images for me just wouldn't change on hover. I also didn't want the image to repeat but this seems to work also, and the image is already preloaded since the background-position is just changed.

#div{
background:url(image) 999px 999px repeat-x;
}

#div:hover{
background-position: 0% 15%;
background-repeat: no-repeat;
}
Ellen from Europe wrote:

4 July 2008 (4 years ago)

Hi
I have exactly the same problem but this doesn't work for me. Would it be possible to see some of your HTML code?
Thanks for the info
Lamin Barrow from Gambia, Africa wrote:

12 July 2008 (4 years ago)

@Ellen
Sure you can. :)
Freddy from Venezuela, South America wrote:

12 July 2008 (4 years ago)

You just save my day... spend 2.5hour until i found this solution! Thanks man!
eyes, wrote:

14 August 2008 (3 years ago)

thanks
false , wrote:

17 September 2008 (3 years ago)

Thank you soooooooo much. This problem had me stuck all day yesterday.
Davide from Fuerteventura, Spain wrote:

12 November 2008 (3 years ago)

Thank you very much for this tip, very useful.
same here, wrote:

12 March 2009 (3 years ago)

"Thank you soooooooo much. This problem had me stuck all day yesterday."

thanks alot!!!
padma from Alexandria, Virginia wrote:

1 April 2009 (3 years ago)

this dosent work for me at all
masterbrumi from Bucharest, Romania wrote:

7 April 2009 (3 years ago)

Thank you very much for this tip, very useful.

It work's very good at me.
Mike Randel from Alabama, Us wrote:

17 February 2010 (2 years ago)

Thank you somuch. This problem had me stumped but not any more :)
alhumaidi from Asia wrote:

8 November 2010 (1 year ago)

can u give me exampel , very thankful
alhumaidi from Asia wrote:

12 November 2010 (1 year ago)

can i make hover is image with css but not bg img , image with borders
nargess from Iran wrote:

13 June 2011 (8 months ago)

Thanks a lot dear friend.my problem was solved
moimBulsolo , wrote:

12 December 2011 (2 months ago)

mexico pharmacy phentermine http://nextdayshippingpharmacy.com/products/emsam.htm shenandoah university school of pharmacy