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 make a Elastic Vertical Layout?

    Div inside how to call class in css?

    How to draw a responsive shape [closed]

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    Rails 4 - how to write a helper method

    how to fix height:auto css

    How to display two images on the same line (CSS)

    How to fix misaligned rows alt the last records, after using vertical scroll and frozen column?

    How to make the footer stick to the bottom?

    How to get same height to two sibling buttons

    How to mix url string & attribute value in CSS content property? [duplicate]

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to use bootstrap-theme.css with bootstrap 3?

    How to do this angle background by CSS?

    show two texts for one mouseOver event

    How to style a png icon with CSS?

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    How can I create a nav bar with a repeat image inside?

    How to replicate the CSS design of a website

    How do I get the tooltip background to extend or grow as I input more text?

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to load one image and use it twice using HTML&CSS? No JS

    How to attach a CSS stylesheet to FXML?

    How to select text under multiple “div-li-a href” using css in selenium web driver

    How to remove the input field around an image button?

    How to automatically style HTML output of kramdown converter?

    How to make one side of a div pointy with CSS?

    How to hide this element using CSS or JQuery