Using CSS Transparent PNG not showing background color

Question

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

If its the same picture from this link seekpng.com/ipng/… then there is something wrong with the picture itself, I loaded it into codepen and there is a background — paul-schultz
Hmmm, i must admit I was beginning to think that. I edited it in Affinity Photo, had the 'Transparent background' option set but I am not sure. Is there some tool I can use to 'fix' or test the transparency. Sorry for such a newb question...:( — Mark Ogier

Mark Ogier Mark Ogier · Accepted Answer · 2020-10-04T16:47:48

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

Using CSS Transparent PNG not showing background color

1 Answers