Images not honoring PNG transparency 7.1

I'm trying to use image stacks with PNGs, but Squarespace is adding a faint color behind them. I tried testing all of the different image blocks and inline was the only one that didn't put a color behind the images (but it squished them). What is the issue here? Just a bug?

I'm having this same issue - I'm wondering if there's an automatic overlay? Because it happens with transparent PNGs as well as JPEGs with white backgrounds, and it looks like maybe that's what's going on. I have been trying to figure out how to turn it off, but no luck yet. If anybody figures it out, I'd love to know!

How is this not getting more attention?  Squarespace doesn't appear to even honor transparent PNGs anymore??

Honestly I have found this platform to be the most frustrating tool for web creation I could ever think of.  It works great if you'd like their cookie-cutter vanilla design but best of luck getting it to do anything interesting and then on top of that, I get problems like this one to try to mitigate because Squarespace can't even get their basic sh* together.  I'm regretting using this platform more and more every time I'm forced to use it.  

Found a fix to this problem in another thread and thought it might be helpful to post it here:

To fix this mess that Squarespace has created with their asinine default settings, do the following:

Menu > Design > Section Themes

Select the theme of the section where your images are displaying incorrectly.  You'll have to do this for all offending sections. 

Click on the offending image, which selects it's widget type in the styles options list.  Choose 'image overlay' and move the white circle in the bottom ribbon all the way to the left.  This will then display transparency correctly.  

Is this fix for 7.1? because I can't find the "Section Themes" unless I'm in Design > Colour.

On 5/20/2020 at 9:01 PM, PracticalPorpoise said:

Found a fix to this problem in another thread and thought it might be helpful to post it here:

 

To fix this mess that Squarespace has created with their asinine default settings, do the following:

Menu > Design > Section Themes

Select the theme of the section where your images are displaying incorrectly.  You'll have to do this for all offending sections. 

Click on the offending image, which selects it's widget type in the styles options list.  Choose 'image overlay' and move the white circle in the bottom ribbon all the way to the left.  This will then display transparency correctly.  

This worked for me, but I did have to go to Menu > Design > Colors > Section Themes. 

Thank you @PracticalPorpoise! This worked!!!!!

You guys are amazing! This worked.

this is happening in 7.0 as well! I hate 7.1...... how can I fix it in 7.0?

thank you! the combined knowledge here helped me fix the problem.

@annakatjordan, @PracticalPorpoise said how to fix it in their post above, and it applies to 7.0

--------------------------------------------------------------------------------------------------------

Found a fix to this problem in another thread and thought it might be helpful to post it here:

To fix this mess that Squarespace has created with their asinine default settings, do the following:

Menu > Design > Section Themes

Select the theme of the section where your images are displaying incorrectly.  You'll have to do this for all offending sections. 

Click on the offending image, which selects it's widget type in the styles options list.  Choose 'image overlay' and move the white circle in the bottom ribbon all the way to the left.  This will then display transparency correctly.  

Thank you! It was a problem fro me too

In 7.0 you can fix it in Menu-Design-Website still select the image them set under image block Plakat the Image overlay to 100% transparent

@PracticalPorpoise Thanks this worked!

Does anyone know how to make 7.1 honour PNG images with transparent backgrounds when used on a Section Background (e.g. as a background banner)? 

I can't seem to follow the above instructions now that Site Styles have had a revamp. TIA

I also cannot see Section Themes and cannot see a way to adjust the background opacity.  ??

@Ransomedia I just figured it out!

press the brush icon in the top right > click color > click color theme > (this part was what tripped me up original) THEN pick the particular color theme you want > Find image Overlay > Slide the image overlay slider all the way to transparent (shown in the image below)

Thank you @the_bonster! That worked 🙏

So I did this exact thing and I'm still having issues. I also removed all my CSS to ensure it wasn't because of that and nope - same issue.

https://www.loom.com/share/972f15c25ce346cbac06c7439deb78a9

Thoughts?

On 5/21/2021 at 4:46 AM, katiedunnit said:

So I did this exact thing and I'm still having issues. I also removed all my CSS to ensure it wasn't because of that and nope - same issue.

https://www.loom.com/share/972f15c25ce346cbac06c7439deb78a9

Thoughts?

Add to Design > Custom CSS

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

Hi, On 7.1. I have the same or similar issue with all my images when I use the 'List' section 😭 I've searched for all possible overlay and image background options to set them as transparent but still not working.

If anyone, finds a solution please please share away! 🤞

Thx

4 hours ago, SarahSWD said:

I have the same or similar issue with all my images when I use the 'List' section

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Has anyone found a solution to this? None of these worked for me. Thanks ~

@mravenelle

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon

Realized what was the problem. My png images in Gallery -Slideshow mode had a light grey background to it and was not transparent. I realized in the design menu, if you select the "Automatically Crop Images" The "Transparent Background Check box" Disappears. If you deselect it reappears at the bottom of the menu. They should fix that. Or allow transparent backgrounds while allowing cropping. They should at least display the Transparent Background option, but grey it out - or provide an explaination as to why one can't use Transparent background in Cropping mode... Please fix this Squarespace. It took me months just to figure this out....