CODEWITHSUNDEEP
htmlcsspngtransparencyalpha
WACOMalt
WACOMalt

Reputation: 46

Transparent PNG in a div tag, not using alpha?

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.

Upvotes: 0

Views: 18267

Answers (3)

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

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

this is the proper css.

Upvotes: 1

Terraflubb
Terraflubb

Reputation: 400

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!

Upvotes: 0

Marcel
Marcel

Reputation: 28087

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);
...

Upvotes: 5

Related Questions