How to reduce the opacity of the background only of a section - not the blocks in it

Hi there, 

I have created an image slideshow as a header at the top of my homepage, built using 4 sections and custom css. The first section is a blank white section, then a full screen image slideshow, then a section with my clients logo on, then a section with their tagline. I kept the logo and tagline as separate sections as the logo always needs to be in the centre of the screen and the tagline needs to anchor to the bottom of the header. I have tried to put a 50% opacity on the section with the logo and the section with the tagline's background only, so the image slideshows get a colour tint and so the words / logo show up on top of the slideshow. As you can see, it has put the transparency on the whole section including the words and logo (which should be white opaque), meaning they look like a watermark. How can I only affect the background of the section, not the blocks in that section too? It would be a lot easier if I could assign a transparent background instead of having to select one of the colour themes...

This is my page header code injection for this page:

<style>
#page .page-section:nth-child(2) {margin-top:-100vh!important;}
#page .page-section:nth-child(3) {margin-top:-100vh!important;}
#page .page-section:nth-child(4) {margin-top:-100vh!important;}
#page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
#page .page-section:nth-child(3) , #page .page-section:nth-child(3) .section-background{opacity:0.50 !important;}
#page .page-section:nth-child(4) , #page .page-section:nth-child(4) .section-background{opacity:0.50 !important;}
   
</style>

url: https://cardioid-sealion-5tra.squarespace.com/home

I have also tried '.section-background{background-color:transparent!important}' for sections 3 and 4 instead of the current code but that doesn't seem to work!

Thanks in advance!

I solved this by removing the following code:

#page .page-section:nth-child(3) , #page .page-section:nth-child(3) .section-background{opacity:0.50 !important;}
#page .page-section:nth-child(4) , #page .page-section:nth-child(4) .section-background{opacity:0.50 !important;}

and replacing with:

 
    #page .page-section:nth-child(3) , #page .page-section:nth-child(3) .section-border{opacity:0.5!important}
  
    #page .page-section:nth-child(3) , #page .page-section:nth-child(3) .content-wrapper{opacity:1.0!important}
  
  #page .page-section:nth-child(4) , #page .page-section:nth-child(4) .section-border{opacity:0.0!important}
  
    #page .page-section:nth-child(4) , #page .page-section:nth-child(4) .content-wrapper{opacity:1.0!important}

I needed to specify .section-border (the background) before  .content-wrapper (the logo / strapline) in the code.....