Making translucent images

PNG doesn't work in IE

[nfs2]

I need to create a translucent blue #000321; tile background image for my site. If the world used firefox or safari i'd just use PNG, but it doesnt work at all in IE.

I thought about using the following in CSS;

filter:alpha(opacity=50);
opacity: .5;
-moz-opacity: .5;

But it makes everything translucent, not just the background. Is there some way to make it affect only the background? If not, is there any other way to make a translucent image?

[benihana]

ifs its a page background (i.e. doesnt go over anything else) it really doesnt need to be transclucent.

[nfs2]

OK maybe i worded that wrong. Its actually a container background that goes over the real background.

[benihana]

lol - ok fair enough .

you need to search for AlphaImageLoader

[nfs2]

But wouldn't that make it not work in all other browers but IE?

[sc112]

What I would do is to create a 2x2 transparent gif, with alternating quadrants in color, so that it looks translucent in your choice of color when tiled.

[nfs2]

Thanks for the suggestion, but when i tried that, it creates a very distracting flickering when scrolling down a page...

Is there some way to use the optacy filter on the container itself but not its child elements?

[tedster]

There's lots of good information in this thread:

PNG Transparency Problems in IE [webmasterworld.com]

[sc112]

Sorry, I wasn't specific enough. What I actually do is define that 2x2 gif as a pattern, and fill a 50x50(or whatever) graphic with that pattern, and tile this larger image. I have done this with no flickering at all. That tiny 2x2 size may be the cause of the flickering.

[benihana]

2x2 transparent gif,

Some versions of IE (cannot remember which) are very very slow to render this.