Floating Element Causes Disappearing (Phantom) Background Image CSS in IE7, IE6

Symptom: When you set background image in a div, and have a floating element on top of the background image, it will cause the image to flicker, disappear, or missing some part of the image. This happens when you scroll the page up and down and occur in IE prior version 8 (mainly I experienced it in IE7 and IE6).

If you have been working with HTML and CSS for a long time, you should be familiar with this bug. If it’s not, then probably you haven’t done something advanced in your design.

Solution:

  1. You can set the element with background to have relative position.
    #div1 { background: url(‘../images/bg.jpg’) top left no-repeat; position:relative; }
  2. Or, you can set the height of the DIV with the background. Easiest way is to have CSS specific for IE6 / IE7 and set the height to 1%
    #div1 { background: url(‘../images/bg.jpg’) top left no-repeat; height: 1%; }

One Response to “Floating Element Causes Disappearing (Phantom) Background Image CSS in IE7, IE6”

  1. Al Says:

    This bug exists as described, but the described fix does not always work. Adding position: relative; or height (presumably, the idea is to make sure the element hasLayout) does not always fix this problem.

Leave a Reply

*