How Do I Create A Half-Section Background and Add Opacity?

Site URL: https://defendingabuse.com/

I apologize if the title is confusing, I'm not sure how else to word it. 

I am trying to create a half background with an opacity of ~.5  to insert some text into. I need the background to go in front of the background photo that I have, obviously.

I have provided an example of exactly what I am talking about below. I use CSS background properties relatively often but I am still a noob and every time I have tried it will not work.  

The photo below is my site with what I have so far. I made it red so its easy. Here is the current code:

section[data-section-id="618a8d101b196313d7d86ae0"]{
  .section-background{
    background-color: red;
    padding-left: 50%;
  }
}

When I try and add opacity, it affects the entire section. I only want it to affect the red half!

Please help!

Try this code

section[data-section-id="618a8d101b196313d7d86ae0"] {
 .section-background {
    margin-left: 50%;
    position: absolute;
  }
  & {
      background-color: rgb(255, 0, 0, 0.5) !important;
  }
}

2 hours ago, tuanphan said:

Try this code

section[data-section-id="618a8d101b196313d7d86ae0"] {
 .section-background {
    margin-left: 50%;
    position: absolute;
  }
  & {
      background-color: rgb(255, 0, 0, 0.5) !important;
  }
}

 

Thank you for the reply!! I assumed you meant rgba so that's what I added, and this is what it gave me:

Any idea how to make it transparent and not gray?

Thank you for your help again!

Try change to 

background-color: rgb(255, 0, 0, 0.5) !important;

On 1/7/2022 at 10:00 PM, tuanphan said:

Try change to 

background-color: rgb(255, 0, 0, 0.5) !important;

Unfortunately, it just turns it red 😞 

On 1/9/2022 at 12:04 PM, WuTangForever said:

Unfortunately, it just turns it red 😞 

So what exactly do you want the left side to show?

7 hours ago, tuanphan said:

So what exactly do you want the left side to show?

On the image I have attached here, the bottom half of that section has a dark opacity on it (marked with the arrows), I would like to mimic that exactly.

So, essentially, I really just want to add some opacity to ~30% of the section

@tuanphan Any ideas for this? I appreciate you