Creating a semi opaque box to house text in the top banner/ heading photo

Site URL: https://www.leahchandler.ca

Hello! I am looking for guidance in creating a semi-opaque box to house my heading text. Is this possible to do?  The image and font colour don't mesh well so if I had a text box, it would help the font be more legible. 

I'm attaching a screenshot from my duplicate website that I'm working on so that if I make a mistake here, it's not messing up my main site.

Thanks in advance to anyone who might be able to help!

Leah

hi @Leah_Chandler Do you mean something like this?

This code will work on your live site. I'd need the link to your testing site to create code for that.

#block-yui_3_17_2_13_1457552603071_12467 {
    background: rgba(255, 255, 255, 0.6);
    max-width: 80%;
}

12 hours ago, houghtoncreative said:

hi @Leah_Chandler Do you mean something like this?

This code will work on your live site. I'd need the link to your testing site to create code for that.

 

#block-yui_3_17_2_13_1457552603071_12467 {
    background: rgba(255, 255, 255, 0.6);
    max-width: 80%;
}

 

Hi @houghtoncreative YES that's exactly what I'm looking for! Wow, thank you so much.

The testing site isn't live, would I need to give you viewing permission in order for you to see it? Sorry, I'm not super familiar with how this works. 

2 minutes ago, Leah_Chandler said:

Hi @houghtoncreative YES that's exactly what I'm looking for! Wow, thank you so much.

The testing site isn't live, would I need to give you viewing permission in order for you to see it? Sorry, I'm not super familiar with how this works. 

As well, where would I apply this code to have it show up on my site?

On 5/19/2022 at 4:33 AM, Leah_Chandler said:

As well, where would I apply this code to have it show up on my site?

Add to Home > Design > Custom CSS