Change Background Color of Image Block Card

Site URL: https://synthesizer-oleander-nnzg.squarespace.com

A preemptive thanks to the community here for helping out. I have a website I'm building. I have added a "Image Block" with a "Card" design.

Problem 1: The image is a custom PNG file I created in Figma. I'd like the background to be white not light green and ideally this wouldn't be a custom CSS thing. Is it the template that I've used that is causing this? Seems like undesirable behaviour. 

Problem 2: When I do import the image. It takes all of the white aspects of the PNG file and turns them to the light green background color. To be clear - I HAVE NOT exported the PNGs with any transparency. I assume this is something Squarespace is doing in the background for people who don't know how to add transparency to a PNG. 

My goal is to have the background white and the transparent PNG display on a white background. Can someone help? 

URL: https://synthesizer-oleander-nnzg.squarespace.com/

Password: help

I've solved this by moving outside of the templates and just creating my own blocks. 

1. 2. Problem from template, CSS can't change this.

Same here, using 7.1 and an image-card bock.
The image is just a round png with transparency. The grey area is added by Squarespace. Any idea how to stop that?

https://janvier.black/mag/greta-thunberg

12 hours ago, Florian said:

Same here, using 7.1 and an image-card bock.
The image is just a round png with transparency. The grey area is added by Squarespace. Any idea how to stop that?

https://janvier.black/mag/greta-thunberg

I see you solved?

On 11/3/2020 at 6:46 AM, tuanphan said:

I see you solved?

Yes! I finally found it!
It's a new setting from 7.1 for background color for block images. You can't find it in the «image-block» style section, but in the «color» section. And then set transparency. I love Squarespace, but I think 7.1 is not so intuitive…

3 hours ago, Florian said:

Yes! I finally found it!
It's a new setting from 7.1 for background color for block images. You can't find it in the «image-block» style section, but in the «color» section. And then set transparency. I love Squarespace, but I think 7.1 is not so intuitive…

Florian - where are you seeing this? My image block section does not have anything about color or transparency.

Try tweaking the Image Overlay colour under IMAGE BLOCK: CARD

23 hours ago, jnassiri1 said:

Florian - where are you seeing this? My image block section does not have anything about color or transparency.

Yeah, I just made the same «mistake» as you!
The settings are NOT in the «image-block» section. You have to look in the «color» section, modify your theme, and then you'll find the image overlay color setting. Not quite easy to find! 🙂

Thank you so much for posting. Saved me so much time! I kept thinking I was exporting the png wrong.