Avatar of adiemeer
adiemeer asked on

Double background-image in IE6


I do have a website where I use a div with a background-image. In IE6 the background-image is displayed two times. I simplified the website in order to make the problem more clear. I only have <div class="image"></div>, where the class image is defined in a stylesheet as follows: .image{height:8px;width:8px;background-image:url(./image.gif);}. The actual size of image.gif is 8 x 8 px.

In IE7 and FireFox the image is displayed correctly. In IE6 the image is displayed two times, above each other. If I define <img src="./image.gif" />, then IE6 is working fine.

I'm curious what causes the double background-image.
Web BrowsersCSS

Avatar of undefined
Last Comment

8/22/2022 - Mon

Do you mean the image is repeated in the background? Or is it overlaying?

Try this:


If you define a border in de image class, you can see what happened. In IE6 the height of the div .image that is rendered is 16px, instead of 8 px. I also had tried to use background-repeat:no-repeat; then the image is displayed one time, but still the height remains 16px.

So, I don't know why the height of the div isn't 8px, but 16px in IE6.  

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

Thanks for helping me! I used the overflow:hidden to solve the problem.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck