Transparent PNG in a div tag, not using alpha?

1
votes

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.

3
htmlcsspngtransparencyalpha

3 Answers

4
votes

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);
...
1
votes
.backgrounddiv {
    position:absolute;
    background: transparent url('POCTransparentBG.png');
}

this is the proper css.

0
votes

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!