Ezilon.com - Target Your Audience, be Seen in Your Region

Transparent corners

You are viewing this site as a guest. Join our community to get your questions answered and share knowledge. Active members may advertise and ask for a website critique.

He has: 49 posts

Joined: Jul 2007

Hi all,

I've made the corners of an image rounded, but when I place a background of a different colour behind it, the square corners still show.

Any ideas in how to make the corners totally transparent.

BTW I'm using Photoshop CS2.

Gary

JeevesBond's picture
Moderator

He has: 3,489 posts

Joined: Jun 2002

It doesn't really matter what image editor you're using, the problem here is what Web browsers (or one browser, in particular) can support. The only way you'll get this to work is with a PNG image with a transparent background. Only problem is: Internet Explorer 6 doesn't support this. Most Web designers just put up with it and make the image match the background colour.

There are two other options: there's a complicated hack for Internet Explorer 6 to make it display transparent PNGs properly, or you could take a chance and ignore IE6 altogether. Smiling

a Padded Cell our articles site!

He has: 49 posts

Joined: Jul 2007

Thanks for your input jeevesbond but I did solve the problem using gif images.

JeevesBond's picture
Moderator

He has: 3,489 posts

Joined: Jun 2002

Hmmm, that'll work, but they'll have jagged edges. You really need alpha-transparency to get really nice rounded corners. Smiling

a Padded Cell our articles site!

He has: 49 posts

Joined: Jul 2007

The corners are actually ok jeevesbond unless you look very closely.

http://www.british-interiors.co.uk

Please let me know what you think.

JeevesBond's picture
Moderator

He has: 3,489 posts

Joined: Jun 2002

That's true: they look good! Smiling

He has: 301 posts

Joined: May 2007

I think you would do better by using PNG-8 with alpha transparency for modern browsers, and binary transparency (like GIF) for IE 6 and earlier:

www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

Sadly, Photoshop does not support this natively. Does anyone know of a plug-in?

Cordially, David
--
"Old web developers don't die, they degrade gracefully..."