How do I change the opacity of text box on image banner on Dawn theme?

As in the title, I would like to reduce the opacity of the text box on my image banner so that the images in the back can be more seen. I tried playing around with the codes but couldn’t figure it out. Any help would be greatly appreciated.

1 Like

@topspotcards

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hi @topspotcards

Can you please give me your store URL and password, if any?
I’ll check further and provide you with a solution.

I found the answer to my own problem. If anyone else is having this problem, somewhere in your code in assets > section-image-banner.css look for some code that looks like this.

.banner__box {
border: 0;
padding: 4rem 3.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
}

after width:100% on the next line add

opacity: 87%

change the 87% to any percentage to your liking.

3 Likes

It is important to add the ; after the value, such as

opacity: 87%;

Hello i tried this but this changed the opacity of the text inside the textbox as well. How do I change the opacity of the container only?

2 Likes

Hello i tried this but this changed the opacity of the text inside the textbox as well. How do I change the opacity of the container only?

Having the same issue. Can’t seem to locate where to change the opacity. Did you solve this?

Thank you so so much!! It works. You made my day :heart_eyes:

Maybe important part: dont forget to add “;”

So the whole line will look like this:

opacity: 87%;

Yeah, I’ve done that. Still changes the opacity of the container contents (text, header, buttons etc.) I just want to change the opacity of the container alone.

Ahh :disappointed_face: sorry to hear that. I’m not specialist at all, just trying to build store by my own and don’t even know the basics..

Maybe try to start a new topic about that, fingers crossed that you manage to solve it.
E.

You’re the fkin maan!!!