为什么我重复的PNG背景图片在IE7或IE8中不显示？

Question

I am trying to convert a PSD to HTML and I am facing a problem. My site works in all major browsers except IE8 and IE7. The background is not showing at IE8 and IE7.

The background is a PNG image and it is repeated. I know the way for non-repeated images but for repeated images what do I need to do? Here is the CSS that I have used:

#footer-top {
    padding: 20px 0;
    background: url('img/footer-bg.png')repeat;
    width:100%;
    overflow:hidden;
    margin-top: 38px;
}

Answer 1

See the blog post PNG background-repeat bug in Internet Explorer 7 and 8

It says:

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.

Answer 2

Maybe you need a space before repeat ?

background: url('img/footer-bg.png') repeat;

(I don't have IE7 or 8 handy to check this.)

Answer 3

I dear , I have find the easiest way . Just try it

background-image:url(images/back-bg.jpg) !important;
background-repeat:repeat !important;
background-color:#fff !important;
background-position:left !important;