CSS IE7 slow overlay

cssinternet-explorer-7overlay

When i press a button an overlay appears. In Firefox the overlay is fast, nothing special. But in IE7 the overlay is very slow. I was wonder why?

Here is my CSS:

.DocOverlayShow
{
    background: url("/Graphics/overlay bg.png");
    top:0px; 
    left:0px; 
    width:100%; 
    position:fixed; 
    padding:10px; 
}
.DocAddCommentBox
{
    color: #000;
    margin:0 auto;
    margin-top: 200px;
    width: 650px;
}

The overlay is activated when i click a button. Everything in IE works fine, but the overlay is soooo slow. Any ideas how come?

EDIT:
When i use Opacity and filter, everything on this div is also transparant. This i don't want. On the overlay div i have another div (DocAddCommentBox). This div may not have transparancy. How can i solve this?

EDIT: Solution:

.DocOverlayShow
{
    background-color: #0057C3;
    Opacity:0.5;
    filter: alpha(opacity=50); /*IE*/
    top:0px; 
    left:0px; 
    width:100%; 
    height: 100px;
    position:fixed; 
    padding:10px; 
    z-index: 1000;
}
.DocAddCommentBox
{
    background-color: #DBDBDB;
    color: #000;
    position: fixed;
    margin:0 auto;
    margin-top: 150px;
    width: 450px;
    z-index:2000;
}

And in html i've used:

<div class="DocOverlayShow"></div>
<div class="DocAddCommentBox">Content</div>

Best Solution

Does your overlay.png have an alpha channel/transparency? If so, try it without the transparency. From memory, IE is horribly slow at rendering such things.

What I would do is use CSS for transparency.

Set opacity like so:

Opacity:0.5;

Unfortunately it's not supported in IE, so we also have to use a custom IE attribute:

filter: alpha(opacity=50);
Related Question