Jump to content

Background Image Problem with IE


Fluoresce

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. ;D

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :confused:

 

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.