Jump to content

background image transparency ignored

Recommended Posts

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.

 

BG_why-join.thumb.png.0dbbae667a9697fe9b5ff606c49fe5e2.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

 

 

Capture d’écran, le 2021-04-04 à 11.07.09.png

Capture d’écran, le 2021-04-04 à 11.07.03.png

Capture d’écran, le 2021-04-04 à 11.06.53.png

Capture d’écran, le 2021-04-04 à 11.06.29.png

Capture d’écran, le 2021-04-04 à 11.06.24.png

Capture d’écran, le 2021-04-04 à 11.06.15.png

Edited by apinrise
adding screenshots
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.