White Ring Around Images


I have a couple of png images on a colored backgrounds. One of which has a white ring around (The images in the upper block to the right), why don’t the other images have this white ring around it even though all of them are png… Isn’t PNG supposed to be transparent?

Here is an illustration of what I’m talking about:


only if it’s saved with an alpha channel but it can also be saved without transparency or with just a one-pixel transparency like gif.

btw. what’s this got to do with CSS?

When saving images for the web in Photoshop, to get rid of that 1px white border (called a “halo”), you have to set a color in the Matte field. Choose the background color that the image will sit on, and you won’t have the white outline any more. (You could set matte to “none”, but you can get a rather jagged edge.)

The Matte box is on the right hand side, under Quality and Blur.

I know it is test website but can you provide a temporary link to the page in question and which web browser you were using. Because what it looks like is the transparent colour is set but the background is interfering.