Hayden/Bedford: Remove the overlay on just ONE banner image?

There I was, rubbing my hands together, ready for the official launch of my website. After uploading the top picture which was simply a white background with my logo centered, in big, I was gleaming with excitement but TO MY HORROR I realized the picture I posted had an overlay on it just like every other picture on the entire website.

The masterpiece I had spent weeks working had been ruined. The big bright logo looked dull and mundane. How could I overlooked such an obvious mistake? I practically tried to redo the entire website so I won’t even post the link to what is now an abomination! I just wanted the Bedford template to feature my logo in the middle on the top like templates like Pacific or Dovetail.

That is my tale of woe.

So how do you remove the overlay on just ONE banner image with a Hayden/Bedford template using CSS? It is the homepage, the first picture in my index. GENNICK? Squarespace Guru? Alan Houser? Somebody help!

I would love to know the answer to this as well! Bumping up with a comment just in case anyone knows the answer!

I figured out the answer! Here is the code:

   #collection-54e8f6c2e4b068927b0c9dca 
   .banner-thumbnail-wrapper .color-overlay {
     background-color: transparent !important
   }

You would need to find the collection child ID of the page that has the banner within your index for this to be applied to one of the banner images, or the collection ID of the whole page to have the option of no banner overlay on a singular page.

To find your collection ID, search your source code in this way: http://answers.squarespace.com/questions/58545/find-collection-id-squarespace-7

I just used this on my Hayden template, and it works :)

Hi everyone,I have been trying to inject the above code, but have been getting 0 result. My goal is to remove overlay from the homepage only. Here is exactly what I am injecting, am I missing some syntax or something?
homepageCollectionId":"54e7af8de4b0360a497a0bef

CODE

#collection-54e7af8de4b0360a497a0bef
   .banner-thumbnail-wrapper .color-overlay {
     background-color: transparent !important
   }

What am I doing wrong?

Thanks!

I found an option working with Bryant that may also work for you, since it is a variation of Bedford. I didn't grab the collection ID but rather used the specific index as the reference. For example:

#index-page-slug .banner-thumbnail-wrapper .color-overlay  {
   background-color: #17c700;
}

Where "index-page-slug" is the slug name you assigned to the index page. You would want to change the Hex color reference to an RGB value with 100% transparency.

Hey I'm trying to do the same thing and having no luck- this goes into the page injection area of the page in question?

Hey I'm trying to do the same thing and having no luck- this goes into the page injection area of the page in question?

I'm also having this problem, I'm going to email support too, I'll report back if I hear anything

I talked with support and you can fix this in the style editor. Under Banner overlay

I also tried that approach to no avail. :(