LB Beta

• All 7
• Freebies 1
• Geo Location 1
• Web Design 1
• Javascript 1
• Tools 2
• Work Life 0
• Business 1

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

Posted in Web Design on 4 February 2008 | 674 Comments

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.