Everytime I try to use transparent PNG images on sites, white edges keep appearing around the images, seen in the photo below. How come this is happening, and how do I stop this from happening?
(I'm currently using Google Chrome 27.0.1453.116)
This was driving me so crazy too, I had to sign up to answer it so no-one else feels that frustration...
It appears to be down to the image-render that the browser is using to resize those transparent PNGs that's adding a light edge to it.
I've found adding the following css properties to the image element (or if it's a background image, the element itself) fixes the issue for me in Chrome and Firefox:
You can read about more options here: https://developer.mozilla.org/en/docs/Web/CSS/image-rendering
Late answer but this works:
Here is another link as well which talks about browser support: