Background Image Problem with IE

[Fluoresce]

This problem is driving me crazy!

 

I have been browsing my site using IE 10, just to see how it looks.  Every time I click from one page to another, the body background image appears and disappears very quickly, as if it has to re-download for every page.

 

Browsing the Web, I discovered that this is a common problem.  Apparently, IE doesn't cache background images properly or something.  I found a variety of "fixes".  I tried them all and none of them have worked, including these three:

<img src="images/dark-texture.jpg" style="display:none" />

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.1)">

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->

Do you guys know how to fix this problem?

 

My body CSS styling looks like this:

body {
    font-family: Verdana, Helvetica, FreeSans, Sans-serif;
    font-size: 100%;
    padding: 0;
    margin: 0;
    background-image: url(images/dark-texture.jpg);
}

My website is Self Help Videos.

[kicken]

I do not see the problem you describe on my system. That would lead me to believe that you may have your IE configuration set to not cache files, causing it do re-download each time. You can use a HTTP sniffer such as Fiddler2 to check whether IE is actually re-requesting the file on each page load. The only thing you can really do though is to make sure that your image is served as cachable and hope the browser is allowed to cache it.

 

Since your background image is dark, what you should do is also set your page's background-color: to a close match so that if your image does not load (or is delayed) the color is close to what it would be with the image and there is not a large color change once the image is loaded.

[Fluoresce]

I do not see the problem you describe on my system. That would lead me to believe that you may have your IE configuration set to not cache files, causing it do re-download each time. You can use a HTTP sniffer such as Fiddler2 to check whether IE is actually re-requesting the file on each page load. The only thing you can really do though is to make sure that your image is served as cachable and hope the browser is allowed to cache it.

 

Since your background image is dark, what you should do is also set your page's background-color: to a close match so that if your image does not load (or is delayed) the color is close to what it would be with the image and there is not a large color change once the image is loaded.

 

Thanks for the reply.

 

My IE 10 cache settings are at default:

 

"Check for newer versions of stored pages"  is set to "Automatic".

 

"Allow website caches and databases" is checked.

 

What are your settings? When you click from page to page, doesn't the dark body background image have to reload every time?

 

The only way around this problem that I can think of is having a light background image, which I don't want.

 

Any ideas on how this can be fixed?

 

Thanks, but setting the page's background to a dark color doesn't help.

 

And thanks for Fiddler2, too. It looks like a cool bit of software.

[cyberRobot]

I don't see the issue in IE10 either. As kicken suggested, you should add a background color similar to the image. That way the transition from plain background to a background image (and vice versa) isn't so jarring. You could try something like this:

body {
     color: #FFFFFF;
     font-family: Verdana, Helvetica, FreeSans, Sans-serif;
     font-size: 100%;
     padding: 0;
     margin: 0;
     background-color: #363636;
     background-image: url(images/dark-texture.jpg);
}

Note that I've also changed the font color, so that text being displayed over the dark background will still be visible. Of course, you may need to adjust your other styles so the font color appears as you expect.

[Fluoresce]

Thanks, guys, but using a dark background colour makes no difference.

 

The problem that I am trying to fix is that, every time I click from one page to another using IE 10, I can see the dark background image of the body tag reload very quickly, before the light foreground colours kick in. If I add a dark background colour to the body tag, I will still see a dark background appear very quickly before the foreground colours kick in.

 

What's confusing me is that you guys aren't seeing the same problem.

 

When you check my site, are you using IE 10 with the default settings?

[cyberRobot]

When you check my site, are you using IE 10 with the default settings?

 

 

I don't really use IE anymore (besides for testing), so I would imagine it's using the default settings.

 

As for comparing settings, the following are the same for me:

• "Check for newer versions of stored pages" is set to "Automatic".
• "Allow website caches and databases" is checked.

[cyber_alchemist]

why don't you use a bit of short hand such as :

body {
    font-family: Verdana, Helvetica, FreeSans, Sans-serif;
    font-size: 100%;
    padding: 0;
    margin: 0;
    background: url(images/dark-texture.jpg) no-repeat;
}

I had some problem with using "background-image:" with some browsers so nowadays i just use "background:"  also refer to this: https://developer.mozilla.org/en-US/docs/Web/CSS/background