Search code examples
imagecsspngfacebox

PNG image showing up with white background even though it has a clear background

I have a facebox window with a close button that i want to be exactly like on uservoice.com (click the feedback link on the bottom right you'll see what i mean. I have added that image as the close button, but when it appears in my browser it shows a white background. The image is supposed to have a clear background. Any idea how to make it show as transparent? Here's an image of what i'm talking about: https://i.sstatic.net/jfxC1.png

Here's the CSS for the close button:

    #facebox .close{

  position:absolute;
  top:-22px;
  right:-24px;
  padding:2px;
  background:#fff;
}
#facebox .close img{
  opacity:0.3;
}
#facebox .close:hover img{
  opacity:1.0;
}
Solution

  • On #facebox .close, remove background: #fff.

    That should be all you need to do. Although, I can't see where you're setting the background-image.