Apparently Internet Explorer 7 and 8 still haven’t gotten PNG quite right. While working on one of my current projects, I stumbled onto a bug with repeating PNG background images.
For this project, I have a page template with several container elements that all have a 1 pixel by 1 pixel PNG background set to repeat, and it looks great when testing it in IE 7 and IE 8. So, I created my next page template with the same styling. This time, IE 7 and 8 both choked when handling the background-repeat. Instead of repeating, both of these browsers inexplicably tried to stretch the 1×1 image across the entire container. The PNG happened to have 60 percent alpha transparency, but I’m not sure that matters. A coworker suggested making it a 10×10 pixel image instead, just to see what happens. Surprise, surprise. That fixed it.
I did a little more searching to see if anyone else had come across this and found this recent blog post. The author also found that this bug appears to occur at random, and that a 4×4 pixel image solved his problem. Since there’s no very little file size difference between 10×10 and 1×1, I’ll stick with the 10×10. But I agree with him that this bug created a cool effect, and it would be great if it could be replicated at will.
Tags: background-repeat, bug, CSS, HTML, Internet Explorer, png
Subscribe to the feed
Subscribe by email
… i’ve managed to get this installed on 9.10 using v0.37 of...
Awesome. You are my hero. I say this after hours of frustration. I was about to give up this aspect of my Web design. (10×10 worked.) Now, if only it were fair to charge my client for the time I spent troubleshooting this M$ pain in the …. (But it is not fair, so I don’t. I consider this part of my ongoing professional education.) Mil gracias. (Now to bed — eyes are burning!)
Very glad to be of assistance.
If any new develops arise on this or related matters, please keep me informed. Thanks.
Interesting, thanks for this. Was having the same issue …
Thanks so much for posting this! I still can’t believe that 10px is the fix, but at least there IS a fix… Thanks again.
Thank you! Ran into the same issue and the 10×10 was an easy fix. I don’t recall seeing any previous documentation on this bug, so kudos to you!
Thank you! My coworker now thinks I’m a bit crazy because I laughed so much because of this bug.
[...] ovde sam nasao da se spominje slican bug PNG background-repeat bug in Internet Explorer 7 and 8, no ovo resenje (random povecavanje slike) radi samo u nekim slucajevima ne i u ovom sto sam ja [...]