Remove opacity in hero image on Debut theme

Technical Q&A
1

Hi there

I am looking to remove the opacity on the hero image on the Debut theme. I have added in this code to the bottom of the theme.css but it doesnt work for me?

.hero__overlay::before {
opacity: 0;
}

I would also love to remove the opacity from the bottom gallery as well.

Any help would be great. Thank you! Kate

2

Hello @KateKline can you share the store URL?

3

Hi @KateKline ,

Please share your store URL and password of front view.

So that I will check and let you know the exact solution here.

Best regards.

4

Hello @KateKline

Welcome to the Shopify Community!

Please share your store URL, so that I can check you issue and will back to you with proper solution.

Have a Good Day!..

5

Hi @KateKline ,

Please add code:

.hero__overlay::before {
      background-color: transparent !important;
}

Hope it helps!

6

Thank you for this suggestion but it did not work. Maybe I am doing something wrong

Screenshot2.jpg
Screenshot2.jpg1911×837 124 KB

Opaque
Opaque1867×825 164 KB

ng?

I am adding it to the very bottom of the theme.css page - screenshot below.

7

Hi @KateKline ,

Please remove code here:

Screenshot.png
Screenshot.png1415×602 305 KB

it will work fine

8

Thank you so much! That worked. What about the gallery at the bottom? Is there a way to take away that opacity?

Also - I have this code at the bottom of my theme I am designing, will this be on the page footer once live? Below all of the payment options etc.

Thank you so much for your help!

KateKline_0-1649890963282.png
KateKline_0-1649890963282.png1920×1080 315 KB

9

Hi @KateKline ,

  • With gallery: I checked debut and it’s not blurry, can you send me the site link. I will check it.

  • With code bottom: You can create a question on the community and send me the link. I will check it. Because this will help build a better community.
    Thank you.