Losing transparency when adding PNG image w/ transparent background as site background image

I have an image saved as a png. The image has a transparent background.

I'd like to upload the image as the background on a section of my site (as an image with a transparent background). 

Whenever I try and add the image to the background, the transparency is lost and the used-to-be-transparent background turns black (the site section colour is blue).

Reducing the overlay opacity doesn't help and increasing it creates a blue wash over the image as well. 

I could add a blue background to the image prior to uploading it except I'm trying to get a film grain effect on the image only, not the whole background. Hence the need for transparency. 

Anyone know how to get around this? 

Thanks

Hi. Design > Site Styles > Color >> Adjust here.

If you still can't solve, please share link to your site, we can help easier

On 7/2/2021 at 2:23 AM, tuanphan said:

Hi. Design > Site Styles > Color >> Adjust here.

If you still can't solve, please share link to your site, we can help easier

I am having the same problem. 

I have a transparent .png image that I want to use as. background. As you can see, the theme editor  has a black overlay and black background but the transparent image has a green background. I've removed that colour from every conceivable setting in that theme and still it persists. 

Changing the theme doesn't change that green background on the transparent image. 

I produced a work around image but I would love to know how to solve this issue. 

On 9/15/2021 at 12:17 AM, RYH0429 said:

I am having the same problem. 

I have a transparent .png image that I want to use as. background. As you can see, the theme editor  has a black overlay and black background but the transparent image has a green background. I've removed that colour from every conceivable setting in that theme and still it persists. 

Changing the theme doesn't change that green background on the transparent image. 

 

I produced a work around image but I would love to know how to solve this issue. 

Can you share link to page in screenshot?

Following.
Same issue here. I've tried the custom code and stylesite, color, adjust. None of them worked.

It looks like Squarespace has an issue with pngs.

16 hours ago, julishtv said:

Following.
Same issue here. I've tried the custom code and stylesite, color, adjust. None of them worked.

It looks like Squarespace has an issue with pngs.

Can you share link to page where you have problem?

7 minutes ago, tuanphan said:

Can you share link to page where you have problem?

Sure, https://marigold-triangle-hnhf.squarespace.com/home

I'm having this issue as well (my third day using ss!)

Attached is a screen grab of the page, the area above the mountains is transparent in the png but appears black in the image block.

On 10/20/2021 at 9:44 PM, lpotter said:

I'm having this issue as well (my third day using ss!)

Attached is a screen grab of the page, the area above the mountains is transparent in the png but appears black in the image block.

If transparent image, it will use Theme Background Color. 

Edit Section Background

I am also having this problem. As you see you can still see the overlay even though I've opacity at zero in design styles. Any way I can get rid of it ..??

11 hours ago, NaomiKathreen said:

I am also having this problem. As you see you can still see the overlay even though I've opacity at zero in design styles. Any way I can get rid of it ..??

Add this to Design > Custom CSS

.image-overlay {
	background-color: transparent !important;
}

The mentioned CSS Code doesn't work for me. I have the same issue with background image PNG losing its transparency.

The site as is:

The PNG image I'd like as a background.

The result is a new background color. I'd like to maintain the original background color according to the color palette/settings.

On 4/23/2022 at 10:03 PM, BrightMatters-Studio said:

The mentioned CSS Code doesn't work for me. I have the same issue with background image PNG losing its transparency.

 

The site as is:

The PNG image I'd like as a background.

 

The result is a new background color. I'd like to maintain the original background color according to the color palette/settings.

What is site url?