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

color-overlay.png

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

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

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

Archived

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.