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:

    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!

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?


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


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.