IE7 very slow rendering background image with repeat style

Posted on 2007-10-02
Last Modified: 2013-12-08
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 {
    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?

Question by:dannyguindi
    LVL 6

    Accepted Solution

    Can you increase the background size?  1x3 is extremely small, and means that the browser has to repeat it a lot more times.  Even increasing the size to 2x6 would reduce the number of repeats in half.

    I've had situations where increasing the size of a tiled background significantly reduced the loading time.

    Author Comment

    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.
    LVL 6

    Expert Comment

    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.
    LVL 13

    Expert Comment

    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.

    Author Closing Comment

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

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Join & Write a Comment

    #Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
    SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now