Giving Banner Text A Transparent Background

Question

I am currently using a Squarespace 6 template called Bedford. I have attached a screenshot of the banner image text that I am trying to get to stand out better. I would like to add a black transparent background and make the text white similar to the two buttons below.

Link to website is https://chris-schilling-jksc.squarespace.com/

I have added custom css to the following below but it also adds the style to the buttons below.

Update:

I am trying to give my banner text which says "YOUR PREMIER SOURCE FOR OILFIELD HAULING" a background of background-color: rgba(0, 0, 0, .9); Any way to accomplish this with CSS?

Thanks for the help

Answer 1

Ok so to accomplish this with CSS only and not change the HTML or use JS you can add this to your custom CSS:

.desc-wrapper > p:nth-child(1) {
  background-color: rgba(0, 0, 0, 0.9);
}

and that will target the first <p> element only, hope that is what you need.

Answer 2

What you're looking for is just:

background-color: rgba(0, 0, 0, .8);
z-index: 1000; 

Z-index can be any value, which is greater than background's z-index. If you haven't used it anywhere else, it's the same effect if its 1 or 9999.

The last '.8' is transparency, which is a value from 0.0 to 1.0, where 0 is invisible and 1 is fully visible.

But when looking at this, I think the effect you're looking for is contained inside <figure id="thumbnail" ...>, which is an image which fills the whole screen width.

At this point I can't give you any better advice because I don't know what exactly you're going for. Try providing code of what you've already done and what's not working like you want it to.