Internet Explorer 8 показывает градиент вместо фонового изображения

У меня странная ошибка. Я чередую полупрозрачное желтое изображение размером 1x1 пиксель PNG в DIV, которое накладывается на текст. В нормальных браузерах все выглядит так, как должно. Есть текст и желтая полупрозрачная надпись над ним.

Однако в Internet Explorer 8 вместо чередования PNG-изображения 1x1 отображается градиент (!).

CSS довольно прост:

.edit_section_overlay {
  position: absolute;
  z-index: 150;

  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;

  border: 1px solid #afad9d;
  background: url('../../images/content/edit/section/overlay/background-color.png') repeat;

  min-height: 34px;
  cursor: move;
}

Я никогда раньше не встречал подобной ошибки, и Google мне не помогает...

Вот демо в jsFiddle, http://jsfiddle.net/jUVfS/