Question

I have a loading div, with a loading symbol as the background image. I’d like that loading symbol to be completely opaque. However, in order to fade the page that is loading, I’ve set the background image to have an 80% opacity. This works well in Chrome and Firefox, but in IE8 the loading symbol is also translucent. Is there any way to fade the background color but not the background image in ie8?

The CSS:

#loadingDiv {
    background: url(../../images/Loading32.gif) no-repeat center center;
    background-color: rgba(255,255,255, .8);
    position: absolute;
    height: 330px;
    width: 890px;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ffffff, endColorstr=#88ffffff)";
}

Answer 1

IE8 doesn’t support rgba, so that’s the reason it’s not opaque…

So use a transparent background image probably using a 2×2 pixel image… Or

You can have a look at CSS3 Pie for IE8 support