2

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.stack.imgur.com/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;
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
John
  • 5,835
  • 8
  • 28
  • 36
  • please post some css so we can take a look. – Kyle Mar 08 '11 at 04:13
  • Which browser(s)? Are you 1000% sure it's a proper transparent `.png`? You haven't set `background-color: #fff` on that element, have you? – thirtydot Mar 08 '11 at 04:13
  • Are you sure the image has a transparent background? Also, make sure that the div behind it (if any) is set to transparent as well. – JohnP Mar 08 '11 at 04:14
  • I'm certain the image is positive. You can find the image at http://widget.uservoice.com/images/clients/widget2/close.png – John Mar 08 '11 at 04:15

2 Answers2

2

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
2
#facebox .close{
  position:absolute;
  top:-22px;
  right:-24px;
  padding:2px;
  background:#fff;
}

probably the background:#fff; here.

Kyle
  • 21,978
  • 2
  • 60
  • 61