CODEWITHSUNDEEP
cssbackgroundtransparent
Mark Ogier
Mark Ogier

Reputation: 141

Using CSS Transparent PNG not showing background color

I have been googling this for hours but none of the suggestions found are working. I have a page banner which is light blue. On it I have placed a transparent png image file. The blue background does not show through, I just see the white/grey checkerboard effect where the transparency is.

It is pretty simple. I have a Div container defined in CSS and a class for the img. Here is the CSS

.header-column-small {
    float: left;
    width: 30%;
    background-color: transparent !important;
    }

.header-column-small img {
    width:220px;
    height: 150px;
    object-fit: contain;
    }

The background color is defined further up the chain in a parent div class.

And here is the HTML

<div class="header-column-small">
                <img src="books-on-shelf-small.png" />
</div>

Here is how it looks Screenshot

I have tried using background-colour: transparent in both the image class and the immediate image container (header-column-small) but no better.

Any help really appreciated Many thanks Mark

Upvotes: 1

Views: 2991

Answers (1)

Mark Ogier
Mark Ogier

Reputation: 141

OK, hangs head in shame... :)

Turns out the PNG file was not a transparent background image at all. Just a warning to others that may be searching the net for images for their project. The sites that claim to be providing 'transparent' png files are not always doing so.

I should have looked for the obvious first before trying all sorts of code hacks to fix a problem that wasn't really there..

Thanks to those who replied so quickly to shine a light on my short-sightedness!

Cheers Mark

Upvotes: 1

Related Questions