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
  • Created
  • Last Reply

Top Posters In This Topic

Try this code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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
On 1/9/2022 at 12:04 PM, WuTangForever said:

Unfortunately, it just turns it red 😞 

978635119_ScreenShot2022-01-09at12_01_48AM.thumb.png.41adf5cb6477f2bbc076a1c099da8c1a.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.