Jump to content

Change section background color around inset background image

Go to solution Solved by WCS,

Recommended Posts

Hi,

Ok I need to change the background color of a section that has an inset background image. With the image inset, there is a larger border around it that is white but I need to change that color to gray.

I searched for a solution in this forum and one said to change the whole page background with the CSS:

image.png.598fb39c38166027a191eccb11fc3277.png

which could work but when I inserted the CSS the actual code appeared at the top of my page. 

Another answer said to change the section background color using SS mobile but I could not find that option. 

Here is a screenshot of the section with the inset image background and the white border around it which is really the background color the page or section. I need to change that background color to gray. 

Here's the draft version of the site also and you can see that section in the middle of the page: https://saffron-cone-t79e.squarespace.com/

Thank you to anyone that can help.

Tankgurl

 

 

 

Screen Shot 2024-03-05 at 5.00.36 PM.png

Link to comment
  • Replies 9
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

@Tankgurl You can modify the color of your sections but if you want to use CSS, following these instructions:

  • Log into your website
  • Go to Website > Website Tools > Custom CSS
  • Put the following in but change "red" to the hex code you want to use:

section[data-section-id="65a3266090ba675b103d2c61"] .section-background{
  background-color: red !important
}

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

@WCS Thank you but I tried following your directions and it didn't work. I tried it with multiple section id's that didn't even have a image as the background but none worked. I also tried "red" and the hex value I wanted. 

Any idea why it's not working? 

https://saffron-cone-t79e.squarespace.com/

section[data-section-id="65b27ef293e4fc0d593bf20a"].section-background{
  background-color:red !important
}

section[data-section-id="659fe6cfeb7d920d48eb8425"].section-background{
  background-color:red !important
}

section[data-section-
id="659fe6cfeb7d920d48eb8428"].section-background{
  background-color:red !important
}

section[data-section-
id="65a3201f7bc65d34c5b0a45c"].section-background{
  background-color:red !important
}

Thanks.

Tankgurl

 

Link to comment

@Tankgurl Hmm just to confirm, you copied and pasted the CSS exactly as provided?

I'd try the following:

  • Copy/paste the provided CSS again and click save. Exit out of the Custom CSS section and refresh the page. Then click back into Custom CSS and see if the section changes color.
  • If you're trying it on a different section, the CSS I'm seeing above is missing a space between the section id and ".section-background", which won't work.

 

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

@WCS Ok thank you. I removed the CSS I had and repasted what you gave me. 

It is working now for the section I have under the leadspace starting with "Welcome to my practice" which does not have a background image. I just did this to test it out. 

section[data-section-id="659fe6cfeb7d920d48eb8425"] .section-background{
  background-color: red !important
}

BUT it is not working for the section I needed which is the one with the inset background image and text starting with "Always one on one...". 

section[data-section-id="65a3266090ba675b103d2c61"] .section-background{
  background-color: red !important
}

ss_no_bg_color.png

Link to comment
  • Solution

@Tankgurl Thanks for the screenshot! Sorry that didn't work. Try:

section[data-section-id="65a3266090ba675b103d2c61"] .page-section.background-width--inset .section-border{
  background-color: red !important}

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment
  • 2 weeks later...

@bre8 I'm not quite sure what you mean. Do you want to put an image behind an image?

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

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.