Jump to content

Brine Family / How to remove the overlay color on just one page within an Index Page?

Recommended Posts

I'm trying to remove the overlay color of the banner section of one of the Index Pages on my site.... The option in the Style Editor will remove it from all pages... Any idea?

Edited by Guest
Initial Revision
Link to comment

After playing around, this code in the Page Header Code Injection of the Index Page, where I don't want the overlay color, works!:

.Index-page--has-image:before {

Hope it helps!

Link to comment
  • 3 weeks later...
  • 2 months later...

Hi there-

We typically only use Brine family templates and have used this method to hide Index Overlay over certain sections of a website from time to time.

It seems the Brine template was recently updated and the code for Index Overlays is no longer found at .Index-page--has-image:before. Support will not look into where the Index Overlay code has moved.

Has anyone found where this has moved?

Link to comment

So looks like it's now displaying the overlay without the :before but it's a bit of the reverse, if you use CSS to try to hide the overlay, the overlay will still display.

We found to fix our existing sites using this approach, we had to turn OFF the overlay in settings and apply it manually w/CSS to any sections needing an overlay.

.Index-page--has-image, .Intro--has-image { background-color: rgba(255,255,255,.5) !important;}

If anyone finds anything else / can find how to hide overlay over just one section in an Index after SS's recent change, we're all ears!

Link to comment
  • 3 weeks later...

@HortonGroup – It seems like SS has changed the way color overlays work in the Brine template family compared to previous templates. This may have something to do with how they're achieving the parallax effect now and also in a way that protects large background images from being accessible (and stolen!) by a site visitor. When you set an overlay color in the Style Editor, it seems to take the transparency and apply it directly to the image (which is hidden from the HTML code) rather than using the rgba declaration on a separate div's background-color. To override this behavior and accomplish what you mentioned above about targeting one specific section and canceling out the overlay, I simply set the overlay color to 0% opacity in the Style Editor which effectively nullifies that style setting. Then in my Custom CSS, I added this bit of code to rewrite the global color overlay for all background/banner images:

.tweak-overlay-parallax-enabled .Index-page--has-image, .tweak-overlay-parallax-enabled .Intro--has-image {
     background-color: rgba(15,40,45,.7);

Then, I was able to target the section I wanted to remove the overlay from via its section ID name:

#mission {

... where "mission" was my section/page title and my rgba settings cancel out any color from overlaying the banner image for that section/page.

Hope that helps. I would love to know where SS put the background images and if they can still be accessible through the code.

Link to comment

Hi there-

@hellothisisjeff Thanks much. My phrasing isn't always the greatest... yes, we're doing what you're suggesting. Manually applying the overlay "we had to turn OFF the overlay in settings and apply it manually w/CSS to any sections needing an overlay."

*The overlay is not being applied to the image directly. You can still view source or inspect element and see the original uploaded image.

Your reply got me digging again and I'm clear now...

PARALLAX ON: the images and overlay are being loaded in a div - div class="Parallax-host-outer"

that is just after the div class="Mobile loaded" section and before the div class=" Site loaded" section that holds the announcement bar, header, content and footer sections.

In this case it's probably easiest to do the approach we're both doing, setting the overlay in CSS.

PARALLAX OFF: I wasn't thinking properly I guess b/c it seems it IS still set up the old way where you could override an Overlay Color set by the Style Editor by calling the #section ID .Index-page-image:before and setting the background color to transparent.

Thanks for the input / getting my head back on track. :)

Link to comment
  • 10 months later...
  • 3 weeks later...
  • 4 months later...
  • 7 months later...
  • 2 weeks later...
  • 4 weeks later...

The following worked for me in template Wav from the Brine family: I have an overlay defined in the global Style Editor of Squarespace.For Pages where I don't want the overlay I injected this in the page-level CSS:

.Intro--has-image:before {
background-color: transparent !important;

Link to comment
  • 1 year later...

This normally works for 7.0 sites > add it to the CSS editor but you need a the browser inspection tool to find out the ID of that section you want to disable the overlay color

[data-parallax-id="ID_OF_YOUR_SECTION"] .Index-page-image:before {
  background-color: rgba(0,0,0,0);


Bildschirmfoto 2020-05-20 um 17.55.06.png

Edited by ArminB

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com

Link to comment
  • 2 years later...
  • 2 weeks later...

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.