PNG background image in Firefox 3.5.4

Question

Snippet of my CSS:

#wrapper div.box {
    background: url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
    background: url('box-top.png') left top no-repeat;
}

That doesn't work. Instead of a transparent image it displays the image but with white space in place of transparent background.

If I do:

<img src="box-top.png" alt="" />

The transparent image shows up correctly. What's casuing this problem?

Answer 1

Have you tried explicitly giving the elements a "background-color: transparent"?

Answer 2

May I ask what browser you are using? IE6 doesn't display PNGs correctly. Also, how are you creating your PNG? If it's Photoshop, make sure you do a Save as Web... or it will not display correctly (transparency issue).

Answer 3

I agree with Pekka - Is it possible those HTML elements are inheriting a white background color from another CSS rule? You may want to try:

#wrapper div.box {
    background: transparent url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
    background: transparent url('box-top.png') left top no-repeat;
}