change opacity of colored box behind text in newsletter section in Debut

Store Design
1

site is blackcoyotejewelry.com

I have an image set as the background for my newsletter section, which makes it difficult to see the text. I’ve already figured out how to change the text color to white and added black boxes behind the text.

I cannot figure out how to change the opacity of just the black color. Everything I’ve tried so far also makes the text semi transparent.

this is the code I’m using for the background image addition:

.index-section--newsletter-background {
  background: url(https://cdn.shopify.com/s/files/1/0056/5562/5846/files/red-clay-horizontal.jpg?v=1627850727);
  background-repeat: no-repeat;
  background-size: cover;
  
}

And this is the code I’m using for the white text and black boxes:

.newsletter-section.index-section--newsletter-background h2 {
    color: #ffffff;
    background: #000000;
}

.newsletter-section.index-section--newsletter-background p {
    color: #ffffff;
    background: #000000;
}

both inserted at the bottom of theme.scss.liquid

p.s. I also have a newsletter signup in the footer, and do not want anything there (or any other page) to change, just add colored boxes in the newsletter section only.

2

@JanelleG

sorry for that issue can you please try this

.newsletter-section.index-section--newsletter-background .h2, .newsletter-section.index-section--newsletter-background h2 {
    color: #fff;
    background: rgba(0,0,0, 0.5);
    padding: 20px;
}
.newsletter-section.index-section--newsletter-background p {
    color: #fff;
    background: rgba(0,0,0, 0.5);
    padding: 15px;
}
3

@JanelleG

Please add code your css file .

#shopify-section-16275692687ff67b52 .newsletter-section.index-section--newsletter-background .h2{
 color: #fff;
    background: rgba(0,0,0, 0.5);
    padding: 20px;
}

#shopify-section-16275692687ff67b52 .newsletter-section.index-section--newsletter-background p {
  color: #fff;
    background: rgba(0,0,0, 0.5);
    padding: 15px;
}

Thanks!

4

Thank you! It worked and I’ve updated it as the solution.

If I were to want to change the box color in the future, how would I do that? I tried to change the color by replacing the rgba with a hex code and it did not work.

5

@JanelleG

yes U have change RGB color

6

I tried and it did not work to change color

7

@JanelleG

can you please share color RGB

8

not sure what this mean? Color is #677a3d

9

@JanelleG

yes please add this code

background: rgba(103,122,61,.7);