How can I change the background color for just one section on a page, without changing the theme?

Site URL: https://colormeworld.com/digi-summit

On my page https://colormeworld.com/digi-summit on my website I would like to change the color of the background for just one section of the page and not the entire page itself. I also want to do this without changing the theme at all. How can I do this?

I'm not sure about doing this with pure CSS (my quick attempts didn't work very well) but you can achieve this with custom Javascript along these lines:

<script>
  var sections = document.getElementsByClassName('section-background');
  sections[0].style.backgroundColor = 'blue'; //this will change the 1st section background
  sections[1].style.backgroundColor = '#fff'; //this will change the 2nd section background
  //sections[3]... is next section
</script>

I've left some comments in there, but basically you've got an array called "sections" and you just pick which section you want (index starts at 0 not 1) and set the backgroundColor to whatever color you'd like.

It wold help if you could tell us which section of the page you want to target and what color you want the background to be. We can then be more specific.

In general there are often multiple ways you can target an element.

Following are just a few that can be used to target the same element.

/* using the id of the element */

#yui_3_17_2_1_1604968259975_121 .section-background {

  background-color: red;
  
  }

/* using the data-section-id attribute of the element */

[data-section-id="5edec3dce16d4b242eb30c0c"] .section-background {

  background-color: red;
  
  }

/* using the position of the element */

.page-section:nth-of-type( 3 ) .section-background {

  background-color: red;
  
  }

thank you

I am having the same problem. Can someone take a look at my code for me please and see what I am doing wrong.

Thanks

@preflight

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Thanks fo getting back to me. Not sure which url you need.

Actual site is: www.pfvc.co.uk

Squarespace url is: https://paul-chamberlain-cjfp.squarespace.com/config/design

I have a red jpeg in place on the banner for the time being but would like it be CSS for speed of loading.

thanks

@preflight

Remove your background image and any previous CSS related to this effect.

Add the following to Design > Custom CSS.

body:not( .has-banner-image ).transparent-header #header,
#home-1-section

  {
  
    background-color: #D92026;
    
    }

Let us know how it goes.

Thanks Creedon, I'll give it a go.

That worked a treat, thanks. The only thing now is that I need the nav bar to be transparent on the home section. I'm stumped, any ideas?

Please see attached

@preflight

I updated my code post.

Let us know how it goes.

That's Perfect Creedon, thank you so much. Apologies for slow responses, I'm over the pond from you.

Hi, I am trying to change the background color of this page to black

https://www.surynorth.com/about-projects-2

But I only would like to change the color of the body and not the color of banner

Many thanks in advance,;

Ernesto

@E-L-G

Add the following to Design > Custom CSS.

#collection-583a6f20b8a79b774fb31694 #pageWrapper {

  background-color : black;
  
  }

This is for v7.0 using the Ishimoto template.

Let us know how it goes.