Jump to content

How do I stop color overlay on card images?

Recommended Posts

When I upload .pngs, the background color is changed, rather than clear to blend in seamlessly with the section background color.

First, why aren't .pngs totally clear?


Second, how do I get card images to appear with correct colors?

My colors appear different when uploaded.


In the screenshot, you can see the color difference:

  • Left: original design colors
  • Right: SquareSpace image colors


Link to comment
  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Could you share the site url so  we can check

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

@Howdy2021, you can adjust these in Settings > Site Styles > Colors. Choose the color theme for that particular section and change Image Overlay color by Image Block type.

Link to comment

Howdy Christy! 

I did find the card overlay color, which appears to be set as white. However, I'd want the color to be 100% transparent for pngs to seamlessly blend in with the background color.

I took a video screenshot: http://somup.com/crfOIUF0Ar

Right now, I notice that inline images appear as transparent PNGs but card images have the overlay.  

Later on when I changed the opacity of the color white to 0%, it still had a visible color overlay.

Is there a step I'm missing?

Link to comment

 Howdy @Howdy2021.

In the color overlay settings switch from "Custom" to Palette. Then you will notice a circle all the way on the right side and you want to drag it all the way left.

That's how you can control the opacity %.

Screen Shot 2021-04-26 at 8.13.47 AM.png

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment


This topic is now archived and is closed to further replies.

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