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


Tags: css,image,css3,png,facebox

Problem :

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: http://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;
}


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.


    CSS Howto..

    How to edit 'clip' CSS property in JQuery?

    how to prevent css div popup from jumping back to the top of the page

    How to slide down to show content of DIV using CSS/jQuery?

    How to style input type file using css

    How to restrict the contents in a table data() of a table to a certain limit?

    How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

    How to keep a very tight control over the order of CSS files in Yii Framework

    How come one of my columns in bootstrap is not functioning properly?

    How to create shaded divs like this with CSS

    how to set equal font size in table cells for mobile device html pages

    How to disable a YUI MenuBarItem from markup

    How to apply CSS to first child div element only?

    CSS InfoBox over all elements how to place? [closed]

    How to show “next”, “previous” buttons on an image (on mouseover)?

    How to make CSS border show on radio button click

    how to get the value of css style using jquery

    How to create HTML/CSS menu 100% width where text goes to the edges?

    How do I get this menu to stay top right of the image on hover? - CSS, jQuery

    How to design “overflowing” border lines of css
    ?

    How to change css image via php depending on weekday

    How to add / remove html elements and content based on the browsing device?

    How to change position of Semantic UI sidebar for different screen sizes?

    how to clip text in css like gmail does to emails subject listings

    How to turn off word wrapping in HTML?

    how to bypass style in element that is automatically applied through class?

    How to lookup the applied font on JavaFX Label?

    How to make CSS menu stay on top

    How to split page into 4 equal parts?

    How to add text or characters using CSS (no javascript)?

    How to achieve “background-image: cover” CSS effect for dynamic images?