Jump to content

Images not honoring PNG transparency 7.1

Recommended Posts

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?

Screen Shot 2020-03-13 at 13.37.06.png

Link to comment

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!

Link to comment
  • 2 months later...

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.  

Link to comment

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.  

Edited by PracticalPorpoise
Link to comment
  • 2 weeks later...
  • 3 weeks later...
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. 

Link to comment
  • 2 months later...
  • 4 months later...

@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.  

Edited by ShalenaWhite
Link to comment
  • 4 weeks later...
  • 4 weeks later...
  • 1 month later...
  • 1 month later...
  • 2 weeks later...
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;}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...

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

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

@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....1493803551_Screenshot2022-03-15130548.thumb.png.3198b1e60b38c165a66fbd59d194f56d.png

130383135_Screenshot2022-03-15130533.thumb.png.cb31e738e813a6a8001d4af33114543f.png

Edited by mravenelle
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.