Coding with Jesse

Stop CSS Background Flickering in Internet Explorer 6

October 18th, 2008

I was once again reminded of an IE6 bug I had forgotten about - background images flashing or flickering when the mouse hovers over them.

So, I went looking for a solution. Here's what I found:

try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}

Works like a charm. Turns out it's due to the browser not caching the background images. This command turns on background image caching.

Do you think this would be good code to add to the core jQuery library?


1 . Zach Leatherman on October 19th, 2008

Zach Leatherman

Weird, I just hit up against this and another problem related to caching in IE6, and just wrote up my thoughts today.

The other half of my problem involved adding img tags to the page using JavaScript.

2 . Nick Dunn on October 20th, 2008

Nick Dunn

I'm not sure this would be appropriate in the jQuery core. It's rather browser-specific. However it would make sense for this to go into ie7.js, since the sole purpose of the script is to fix IE6 bugs.

Thanks for the reminder. I keep meaning to add this into my common functions library that is used in every project.

3 . Björn Rixman on October 27th, 2008

Björn Rixman

It's a great fix to a really annoying issue. Since it's a tiny snippet of code, I'd personally rather put it in a global .js-file than have it included into the jQuery core.

My experience though is that the fix isn't working properly on a multipleIE IE6 – only "real" IE6 browsers. Another thing to notice is that the fix doesn't solve flickering background images if you swap an image on mouseover; only changing background-position.

4 . Marco Pracucci on January 20th, 2009

Marco Pracucci

This fix works only with Internet Explorer 6, Service Pack 1 or newer.

5 . Ty on February 6th, 2009


Hi Guys
where would you apply the javascript to load the gfx?
Im using loads of backgrounds in a piece im doing and IE really lets it down...

6 . Pawel on June 17th, 2009


U dont need to do that at all.

Assign the images properly and there will be no issue with IE 6.

BG images should be assigned to the div around the 'a' tag...

lets say.. ul li a ... assign the image to li tag ...

or simple wrap up the a tag and assign the bg image.


style wrapper and "a" tag the same ( width, heigh, block) and test it....

7 . Nick Dunn on June 17th, 2009

Nick Dunn

You say this is doing it "properly", but you've diverged from convention of placing both the background and its hover state on the anchor itself. Your solution does solve the problem, since the background image on the containing LI is ever-present, meaning the 'flash' isn't visible. But it still means you've used a workaround just to fix IE6. I'd prefer to code logically for the other browsers, and use a piece of disposable JavaScript for IE6.

8 . pawel on June 17th, 2009


puting wrapper div is still better solution in my opinion to fix IE6 flickering... what is someone have js turned off... and in the case of using ie6 is common thing... what then? bg images will still flash... in your solution.....

I do think is coded logicaly as in many cases u dont even have to add divs.... but just style properly dives around....

Adding aditional styling is way better then adding js.. (client side script)

Well, it is my opinion... i just wanted to give u the solution... to do it with no JS.... (for me much better) ....

What u chose, it's up to u.

9 . Jason on October 3rd, 2009


Thanks, works perfect. Anyone wanting or needing instructions on how to use the code:

1) Create a .js file lets say 'ie6fix.js' and paste the above code into it and save in the directory where you'll be using the script.

2) Load the script using IE conditional comments (hidden to other browsers just like html comments)

<!--[if lte IE 6]>
<script type="text/javascript" src="ie6fix.js"></script>

Load the script from your site index page as it only needs to be run once per browser session. If visitors are likely to visit other pages first then you'll have to load it from all other pages to cover for that, or you could use some other scripting, sniffing method.

10 . Seb on October 28th, 2009


I have just built a website with CSS and divs in Dreamweaver CS4 which has a Flash banner on each page and java script rollover nav bar.

My problem is that in Firefox the whole screen flashes white for a second when moving from page to page in Fire Fox while it seems to work fine in Safari, Opera and Windows IE.

Any help would be appreciated.

11 . Pawel on October 28th, 2009


Could you show us the website ? Then it would be easier to identify the problem....

12 . Ryan on March 16th, 2010



If someone has javascript turned off, they shouldn't be on the internet.

13 . Stig on August 23rd, 2010


Ryan, pawel,

If someone is using IE 6, they shouldn't be on the internet.

14 . chris on April 25th, 2012


hi all,
i hope i will find the answer here. i've just finished my webpage. its main frame has black bg color. i ve noticed that i get these silly white flashes while switching my gallery images under ,,projekty''. i believe it all started since i've done self-adjusting vertical alignment of my gallery. it was ok before - i had no white flashes. of course, i have set up my bg color as black, i also tried using black bg gif image but the flashing remains.
please any suggestions from you.
my webpage

Comments are closed, but I'd still love to hear your thoughts.