Forum Moderators: open

Message Too Old, No Replies

Making translucent images

PNG doesn't work in IE

         

nfs2

3:15 pm on Sep 21, 2006 (gmt 0)

10+ Year Member



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

3:28 pm on Sep 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

nfs2

3:36 pm on Sep 21, 2006 (gmt 0)

10+ Year Member



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

benihana

3:42 pm on Sep 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



lol - ok fair enough .

you need to search for AlphaImageLoader

nfs2

5:36 pm on Sep 21, 2006 (gmt 0)

10+ Year Member



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

sc112

6:56 pm on Sep 21, 2006 (gmt 0)

10+ Year Member



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

8:01 pm on Sep 21, 2006 (gmt 0)

10+ Year Member



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

8:03 pm on Sep 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There's lots of good information in this thread:

PNG Transparency Problems in IE [webmasterworld.com]

sc112

9:24 pm on Sep 21, 2006 (gmt 0)

10+ Year Member



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

8:47 am on Sep 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



2x2 transparent gif,

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