Jump to content

Remove Overlay On Specific Banner Image

Go to solution Solved by tuanphan,

Recommended Posts

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

Link to comment
  • Replies 12
  • Views 293
  • Created
  • Last Reply

Top Posters In This Topic

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:

image.png.514377df2236c79048c274b90f331c3e.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
  }

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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??

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
On 7/8/2024 at 10:44 PM, Justin86 said:

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

With top banner, you can use this CSS code

div#parallax-images>div:nth-child(1) .image-overlay-wrapper {
    background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.