1

THIS QUESTION IS SOLVED — can't post an answer to my own question on account of newb status. Had more than one file and was using the wrong file path. User error :-)

I using an email template from MailChimp and I'm substituting a client logo in the title bar for the the gear icon. Here's my logo in the simplified form of a circle with bezelled bottom edge followed by the original gear icon. I'm not allowed to post images yet http://dl.dropbox.com/u/1585739/bze_html_nl/images/header-bg%20with%20gear%20and%2072px%20circle.jpg

Yet when I load it into the browser I get this: Yuk http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png

The circle and the gear have very similar RGBA values so far as I can see in PS.

I don't think this is any kind of CSS shadow-effect but why is it tearing? (I haven't done much web work before but 30 years of Design and DTP. I'm pretty green re web nuances so far).

Remember this is for an HTML-email so those 'standards' apply :-)

HTML/CSS Source

<--! EDIT--> Here is a link to the original "gear" image. It is a .png with alpha, not a .gif btw. Gear http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png My PNG file made in PS with alpha: PNG file http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png

Web_Designer
  • 72,308
  • 93
  • 206
  • 262
wide_eyed_pupil
  • 3,153
  • 7
  • 24
  • 35

2 Answers2

2

The image you provided later is different than in the site that you have shown where there is white stuff at the edges of that circle..

Shows both images in a dark background. jsfiddle - jsbin (jsfiddle is being slow..)

Left Circle = The one in this url - Has that extra white stuff.

Right Circle = The one you gave later on as the "PNG file" - Doesn't have extra white stuff.

Conclusion would be that you are using the wrong image..

Joonas
  • 7,227
  • 9
  • 40
  • 65
  • I think you must be correct! Thank-you sir for you patience, since I'm new to all this web marlaky I often think it's something I don't understand rather than simple user error. – wide_eyed_pupil Dec 15 '11 at 08:56
  • I came to same conclusion but the answer I posted isn't allowed since I'm a SO newb. – wide_eyed_pupil Dec 15 '11 at 08:57
1

Looks to me as though you had this over a light background, and that the halo parts you're seeing are opaque. I'd load this into GIMP and use Colour to Alpha to make sure those parts don't affect the image.

Also, you said png, but if you are using a gif (which I suspect) that only supports one transparent colour, what you're seeing looks exactly like issues you get when you have a hard sprite with a solid back ground colour (which is the transparent entry in the palette) and then you resize the image. Most graphics applications smooth the scaled image and this means that the pixels around the fringe are no longer using the transparent palette entry.

Matt Lacey
  • 8,227
  • 35
  • 58