transparent backgrounds (webforumz logo)

[danny322]

Hi all

Ive noticed on this website the logo (top left) has a transparent background, how is such a clean/crisp picture achieved because when i set background to transparent in photoshop and save it as a jpeg/gif, once i put it on the website its really pixelated.

Thanks

[Marc]

Thats because the Webforumz logo is a PNG that supports transparency and it isnt 256 limited to 256 colours like GIF. JPEG doesnt support transparency.

[MikeHopley]

GIF is limited to single colour transparency: either a pixel is 100% transparent, or 100% opaque.

PNG allows alpha channel transparency: a pixel can be partially transparent. This allows for a smooth blend, without aliasing.

You can think of it as "anti-aliasing for transparencies", if you like.

[Marc]

Also for PNG's to work in IE 6 you need a hack...

[MikeHopley]

Originally Posted by Marc

Also for PNG's to work in IE 6 you need a hack...

Not again! It's the second time today.

PNGs work fine in IE6. Really they do.*

* Okay, you need a hack for alpha-transparent PNGs. But if you're not using the transparency, you can use PNGs with no hacks whatsoever.

Even if you are using transparency, the PNG will still display in IE6 -- but with grey bits where there should be transparency.

[karinne]

Like Mike said, PNG work fine... it's the transparency that causes problems in IE6.

To get the transparent PNG to work on the forum I use the method from the first link in this thread

How to deal with PNG transparency in IE6

[MikeHopley]

Originally Posted by karinne

To get the transparent PNG to work on the forum I use the method from the first link in this thread

How to deal with PNG transparency in IE6

That method is good, but it won't work on CSS background images.

[karinne]

How do you mean? The logo in this forum for instance is showing up through an <img> tag.

[Marc]

Lol.. Sorry, thats what i mean Mike.. I am in the habit of saying that PNG's dont work in IE 6!!

[MikeHopley]

Originally Posted by karinne

How do you mean? The logo in this forum for instance is showing up through an <img> tag.

Yes. An <img> tag is not a CSS background image!

Let's say you want:

• A CSS background image
• With alpha transparency
• Works in IE6

Your hack won't work. This hack will. It's my current favourite IE PNG fix. Maybe you could add it to your list?

[karinne]

I get it ... I was just pulling your leg

I have had problems with some PNG Transparency hacks in the past and that one was the only one I could ever get working. I haven't seen the one you linked tho and I will be trying it. Thanks.

I have added it to the list.

[MikeHopley]

Originally Posted by karinne

I get it ... I was just pulling your leg

Evil, evil woman.

I have had problems with some PNG Transparency hacks in the past and that one was the only one I could ever get working.

Yes, I've had the same problem. Many of them either don't work, or they do work but have some really annoying gotchas.

The only real limitation on this one is that you can't set the background to repeat (in IE6). Apparently this is a fundamental limitation of the IE filter. You can read all about it here.

[danny322]

Does anyone have any good tutorials on creating transparent gifs without losing quality?

[Lchad]

What graphics program are you using?

.gif lose quality... png's are crisp and nice!

[danny322]

well i use photoshop lchad, but what i want to do is make some nice curved boxes for my website without having to worry about what background its going on to (if you get me)

[karinne]

24ways started up again and there's a an article on Transparent PNGs in Internet Explorer 6

[alexgeek]

Use pngcrush to cut down the size of the PNGs also.