asked on

IE7 very slow rendering background image with repeat style

Hi experts,

I have an html page with a background image that I want to repeat both vertically and horizontally. The background displays fine in most browsers (including IE6 and Firefox 2), but on IE7 it renders very slowly (you can actually see the image as it is repeated on the screen). The image is 1x3 pixels. This is my CSS style:

#main {
width:768px;
background-image: url('background_img.gif');
background-repeat: repeat-x, repeat-y;
}

Can anyone tell me if there is a known problem in IE7, or even better how to get around it?

Thanks.

ASKER CERTIFIED SOLUTION

TheKyle

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dannyguindi

ASKER

I can increase the size if I have to. I'm just trying to figure out why the problem only occurs on IE7. If other browsers can handle it (including other IE versions), then there must be something that can be done to make it work on IE7.

TheKyle

It's probably just the efficiency of the browser's rendering engine. All browsers are going to be different. IE7 is probably just poorly written when it comes to rendering small background images.

R7AF

I agree with TheKyle. I've done this too in the past (pre IE7), trying to create a background image that was only several pixels big, and I had the same problem with other browsers. I don't know why IE7 doesn't handle it as well as IE6 or FF, but imagine a Pentium 3 or even Pentium 2 computer. Maybe they have problems with this in all browsers.

Increase the canvas, not to 2x6, but to 20x60 or something. This is probably a GIF or preferably a PNG, and the increase in size won't be a big difference in download size.

You might try another image, with different colors. You might want to change the image format. Maybe GIF performs better than PNG or vv.

dannyguindi

ASKER

Since nobody suggested an alternative to this problem, I will award the solution to the next best answer.