Transparent PNG in a div tag, not using alpha?

Question

I have an odd issue while beginning to learn CSS. This is a test page. It has a large transparent PNG covering the background color of solid blue.

Typically the black image (which has transparent holes in it) completely blacks out my background color.

In this example page I made the image's div transparent just to see if the background was still working.

Any ideas why my alpha is getting completely ignored?

Thanks all.

Answer 1

It's because on .backgrounddiv you have background-color set to #000. Instead use transparent to fix:

.backgrounddiv {
    position:absolute;
    background-color: transparent;
    background-image:url(POCTransparentBG.png);
...

Answer 2

.backgrounddiv {
    position:absolute;
    background: transparent url('POCTransparentBG.png');
}

this is the proper css.

Answer 3

I just looked at your page, and it seems like the div with the background image on it (backgrounddiv) is styled to also have a solid black background (#000). If you remove the:

background-color: #000;

From your source, it looks the way you'd like!