background Image repeating in IE6

[raheelajk]

Hello,

This is something weird I have never experienced before. I have placed an image in the header of my site using following css.

* { margin:0; padding:0;}


body {
background:#eaeae2;
font-family:Arial,Helvetica,sans-serif;
font-size:100%;
line-height:1em;
color:#414141;
min-width:1240px;
}
.header_purple {
background:url(../images/header_purple.gif) no-repeat left 158px #fff;
margin-left:2px;
}

Now when I am viewing page in IE6 it is placing background image correctly like FF and IE7,8 do BUT when I hover mouse in body area of my site this image duplicates itself in background. When I minimize the IE6 window and restore again the later image(which came by hovering mouse in body area) is gone.

Weird isn't it?

Any help will be greatly appreciated.

[raheelajk]

I don't know if this forum is alive or not but I found the solution. In IE6 no-repeat repeats background if divs are overlapped provided background div doesn't have height.

So always provide height of background div.