Question

i know, the title is a bit crampy, but it’s a weird problem.

i’m planning to adopt a open source webdesign. It all looks good on firefox 3.5 on vista, but when i open it up in Ie8 on vista the background goes ‘flashy’ on reload (i can’t find another word, sorry)
what i THINK happens is that the background source (a 1px width and 1200px high image) gets refreshed every time so it has to paint 1600 vertical lines every page reload. (but it’s only a guess: FF has to do the same and no problems there.
The css for the background is this:

font-size: 11px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    margin: 0px;
    padding-left: 50%;
    clear: both;
    position: absolute;
    background: url('images/bggrad2.jpg') repeat-x;
    background-color: #464646;

i’ve put it online here:
http://www.mydotnet.nl/test/

I’m realy curious what you’re experiences are (maybe it’s just my pc)

i also tried to enlarge the background to 1 big one (3000*1200) so it only has to show one picture, but that didn’t work 🙁

Michel

EDIT:
there is also a version with one big (3000*1200) picture so the browser doesn’t have to paint 1600 vertical lines.
it’s here
http://www.mydotnet.nl/test/index2.html

Answer 1

Oh man, IE fun. I’m a mac person, so let’s see how much I’ll be able to help with this voodoo…

Have you tried using a different image format, eg: png?

See if you can find another website with an image background and load it in IE to see if it behaves similarly. If not, try stealing the image they use and setting it as your own page background to see if it’s the image that is the problem.

Also, is there any reason why it has to be so big? I find that if you want a gradient background like that, you can get away with having the image be 600-700 px tall and setting the background-color to whatever the bottom gradient color is. You may also like to set the background to fixed

Edit: Now that I look at this, I’m pretty sure this happens across the board when some browsers are loading images. It usually flashes the color of the background, and then displays the image a split second later. There might not be anything you can do about it. Try finding other examples, eg: wikipedia. Often it’s less noticeable because the background color and the image color aren’t very different. I would encourage you not to worry about it. I don’t think your users are going to be stressing about it.