background image transparency ignored

Site URL: https://walrus-bellflower-k256.squarespace.com/

I have an image in png format which is a black shape on a transparent background. I want the image to be the background image for a particular section which has an yellow background color. I would like the image to float on top and be adjustable opacity. It seems to do most of this fine, except when I set the opacity to 0, the area that is supposed to be transparent is actually gray. And as I adjust the opacity, you can see that it also adjusts the opacity of this gray area. It seems as though instead of the image being black-on-transparent, it gets converted to black-on-gray .

On my computer, the background is transparent, but when I follow the link to the assetUrl on the background div, I get this white-background png. I've uploaded the png and linked below in-line to the version on my squarespace server.

Wondering if anyone has any ideas. Not coming up with much when searching for solutions. I've tried also to use a GIF with transparent background, but a similar bug occurs, where the background isn't quite as grey, but still isn't transparent. As you can see here, the PNG transparent background is replaced with a dark grey, and in the GIF version it's pure white.

Thanks for any suggestions!

Site-wide password?

I can't share our password