Jump to content

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

Recommended Posts

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.  Screen Shot 2022-01-05 at 2.51.01 PM.png

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!

1431961596_ScreenShot2022-01-05at3_09_33PM.thumb.png.f43ab5cb5c104dac3c5ce2bc88b4ae67.png

 

Please help!

Edited by WuTangForever
Added info
Link to comment
  • WuTangForever changed the title to How Do I Create A Half-Section Background and Add Opacity?
  • Replies 7
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

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?

1324358830_ScreenShot2022-01-07at12_03_32PM.thumb.png.5e9b8be60c206107b06f791c8582a37c.png

Thank you for your help again!

Edited by WuTangForever
Link to comment
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

852526810_ScreenShot2022-01-05at2_51_01PM.thumb.png.914c87f09699b6b55fc058b90c321236.png

Link to comment
  • 2 weeks later...

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.