Archive for January, 2011

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

Thursday, January 13th, 2011

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.


  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%; }