Databases
StackOverflow2013
Postsdbo
POMy PNG icon's feathered image edge is not rendering nicely over a background image
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMy PNG icon's feathered image edge is not rendering nicely over a background image
    text
    copied!<p>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 :-)</p> <p>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. <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/header-bg%20with%20gear%20and%2072px%20circle.jpg" rel="nofollow noreferrer">I&#39;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</a></p> <p>Yet when I load it into <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/full_width_bze_baseload-gear.html" rel="nofollow noreferrer">the browser</a> I get this: <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png" rel="nofollow noreferrer">Yuk http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png</a></p> <p>The circle and the gear have very similar RGBA values so far as I can see in PS.</p> <p>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). </p> <p>Remember this is for an HTML-email so those 'standards' apply :-)</p> <p><a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/full_width_bze_baseload-gear.html" rel="nofollow noreferrer">HTML/CSS Source</a></p> <p>&lt;--! EDIT--> Here is a <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png" rel="nofollow noreferrer">link</a> to the original "gear" image. It is a .png with alpha, not a .gif btw. <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png" rel="nofollow noreferrer">Gear http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png</a> My <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png" rel="nofollow noreferrer">PNG file</a> made in PS with alpha: <a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png" rel="nofollow noreferrer">PNG file http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload