Remove Overlay On Specific Banner Image

Hi,

I'm looking to remove the overlay (semi-transparent grey) on the first banner image of my website's homepage. Is there a specific code I can insert into the page to accomplish this?

Thanks,
Justin

@ACUSOUL Can you share your website URL ?

share site url pls?

3 hours ago, ACUSOUL said:

I'm looking to remove the overlay (semi-transparent grey) on the first banner image of my website's homepage. Is there a specific code I can insert into the page to accomplish this?

You don't need code for this, open the section settings, go to Background and change the Overlay Opacity:

My website is www.acusoul.com, I don't see the option to change opacity on my template for a specific banner. It would apply to all banners in the site styles. 

Thanks,
Justin

1 hour ago, ACUSOUL said:

My website is www.acusoul.com, I don't see the option to change opacity on my template for a specific banner. It would apply to all banners in the site styles. 

You're right, you don't have this option since you're on an old 7.0 template, that's a major reason why sharing your URL is important to get a relevant answer.

Try this Custom CSS:

#acupuncture-food-therapy-toronto {
  .image-overlay .image-overlay-wrapper {
    background-color: rgba(145, 142, 141, 0.0) !important;
  }
}

I added the code in custom css, but it doesn't seem to have worked.

I might have got the selector wrong given this is an old template and I've forgotten how to use it!

Try this:

#yui_3_17_2_1_1720205739171_649 {
  .image-overlay .image-overlay-wrapper {
    background-color: rgba(145, 142, 141, 0.0) !important;
  }
}

If that doesn't work, let me know if this works (but it will affect too much):

.image-overlay .image-overlay-wrapper {
    background-color: rgba(145, 142, 141, 0.0) !important;
  }

The 2nd one worked, but affected all parallax banners. For some reason the first one didn't work..

Great, just need to figure out the selector, maybe this:

#acupuncture-food-therapy-toronto-section {
  .image-overlay .image-overlay-wrapper {
    background-color: rgba(145, 142, 141, 0.0) !important;
  }
}

@tuanphan What am I missing on this section selector??

Still not working with the word "section"... Please let me know if there is anything else I can try.

Thanks it works!