Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3159
  • Last Modified:

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.
0
dannyguindi
Asked:
dannyguindi
  • 2
  • 2
1 Solution
 
TheKyleCommented:
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.
0
 
dannyguindiAuthor Commented:
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.
0
 
TheKyleCommented:
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.
0
 
R7AFCommented:
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.
0
 
dannyguindiAuthor Commented:
Since nobody suggested an alternative to this problem, I will award the solution to the next best answer.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now