Jump to content

Hide grey image background on 'Headline' section

Go to solution Solved by Jia,

Recommended Posts

Site URL: https://carnation-tangerine-dd9n.squarespace.com/

I've created square images of a green block with rounded radius corners, and I've added them to a 'Headline' section and chosen the 'Card' layout option. Then instead of using original image, I'm styling the image with a shape, which controls how it's displayed (in a long paralellagram shape with 2:3 ratio).

Annoyingly though the layout is placing a grey line top and bottom, which I can't remove even by uploading a PNG with a transparent background, which suggests it's baked into the layout i've chosen. Is there a way to hide this background, please?

Attached a screenshot of what I mean. See line above and below the green block image.

image background.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

2 hours ago, joessqsp said:

Site URL: https://carnation-tangerine-dd9n.squarespace.com/

I've created square images of a green block with rounded radius corners, and I've added them to a 'Headline' section and chosen the 'Card' layout option. Then instead of using original image, I'm styling the image with a shape, which controls how it's displayed (in a long paralellagram shape with 2:3 ratio).

Annoyingly though the layout is placing a grey line top and bottom, which I can't remove even by uploading a PNG with a transparent background, which suggests it's baked into the layout i've chosen. Is there a way to hide this background, please?

Attached a screenshot of what I mean. See line above and below the green block image.

image background.png

Hi, try adding this code to custom css (Design > Custom CSS) and let me know how it goes 🙂

.sqs-block-image .design-layout-card .image-overlay {
  background-color: transparent;
}

 

Please give this a 👍 if it helps

Link to comment
11 hours ago, Jia said:

Hi, try adding this code to custom css (Design > Custom CSS) and let me know how it goes 🙂

.sqs-block-image .design-layout-card .image-overlay {
  background-color: transparent;
}

 

Thank you for your response - unfortunately it didn't work! 😞

 

Link to comment
4 minutes ago, Jia said:

Ahh, try adding the important tag, like this:

.sqs-block-image .design-layout-card .image-overlay {
  background-color: transparent !important;
}

Fantastic, that did it! Thanks - I should have thought of that. 😂 Thanks so much for your help.

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.