Change section background color around inset background image

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:

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

@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
}

@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

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

@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
}

Thank you for the help!

Finally worked.

Melanie

@Tankgurl Oh good! That's fantastic. Happy designing! 🙂

Hi @WCS how would I do this but with an image instead of a colour? around the inset image. thx

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