Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Change Background Color of Image Block Card


justinporter1980

Question

Site URL: https://synthesizer-oleander-nnzg.squarespace.com

A preemptive thanks to the community here for helping out. I have a website I'm building. I have added a "Image Block" with a "Card" design.

 

Problem 1: The image is a custom PNG file I created in Figma. I'd like the background to be white not light green and ideally this wouldn't be a custom CSS thing. Is it the template that I've used that is causing this? Seems like undesirable behaviour. 

 

Problem 2: When I do import the image. It takes all of the white aspects of the PNG file and turns them to the light green background color. To be clear - I HAVE NOT exported the PNGs with any transparency. I assume this is something Squarespace is doing in the background for people who don't know how to add transparency to a PNG. 

 

My goal is to have the background white and the transparent PNG display on a white background. Can someone help? 

URL: https://synthesizer-oleander-nnzg.squarespace.com/

Password: help

 

Screen Shot 2020-03-10 at 1.48.42 PM.jpg

Link to comment

9 answers to this question

Recommended Posts

  • 1
On 11/3/2020 at 6:46 AM, tuanphan said:

I see you solved?

Yes! I finally found it!
It's a new setting from 7.1 for background color for block images. You can't find it in the «image-block» style section, but in the «color» section. And then set transparency. I love Squarespace, but I think 7.1 is not so intuitive…

Swiss photographer, designing with Squarespace since 2014 
florianzellweger.ch | florianzellweger.com 

influenz.design 
janvier.black 
ivoire.black 

Link to comment
  • 0

Same here, using 7.1 and an image-card bock.
The image is just a round png with transparency. The grey area is added by Squarespace. Any idea how to stop that?

https://janvier.black/mag/greta-thunberg

Screenshot_2020-11-02 Greta Thunberg — Janvier.png

Edited by Florian

Swiss photographer, designing with Squarespace since 2014 
florianzellweger.ch | florianzellweger.com 

influenz.design 
janvier.black 
ivoire.black 

Link to comment
  • 0
12 hours ago, Florian said:

Same here, using 7.1 and an image-card bock.
The image is just a round png with transparency. The grey area is added by Squarespace. Any idea how to stop that?

https://janvier.black/mag/greta-thunberg

Screenshot_2020-11-02 Greta Thunberg — Janvier.png

I see you solved?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
3 hours ago, Florian said:

Yes! I finally found it!
It's a new setting from 7.1 for background color for block images. You can't find it in the «image-block» style section, but in the «color» section. And then set transparency. I love Squarespace, but I think 7.1 is not so intuitive…

Florian - where are you seeing this? My image block section does not have anything about color or transparency.

Screen Shot 2020-11-04 at 11.10.32 AM.png

Link to comment
  • 0
23 hours ago, jnassiri1 said:

Florian - where are you seeing this? My image block section does not have anything about color or transparency.

Yeah, I just made the same «mistake» as you!
The settings are NOT in the «image-block» section. You have to look in the «color» section, modify your theme, and then you'll find the image overlay color setting. Not quite easy to find! 🙂

Swiss photographer, designing with Squarespace since 2014 
florianzellweger.ch | florianzellweger.com 

influenz.design 
janvier.black 
ivoire.black 

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