Transparent Gradient Behind Header

Site URL: https://grape-plum-jrlb.squarespace.com

I'm working with a difficult (busy) logo.  I'm trying to find code for a transparent gradient behind the header.  I've mocked it up in Illustrator to show what I'm looking for (attached).  Has anyone been successful using custom code for this?  I'm using the Grape Plum template.

Site password is: PreviewER

[data-section-id="5e3bc9210f963716337a1bb2"] .section-background:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-image: linear-gradient(to top, #182043, transparent);
}

Hi @tuanphan

I'm completely new to CSS editor. I'm looking to have a header gradient also.

I tried copying what you wrote above and pasted into the editor (...squarespace.com/config/editor) and hit save but there was no change to the site.

Being so new to this I know I'm doing something wrong. Are you able to help or is there a post I should read before doing anything?

I deleted the code and saved just in case.

Thank you

Dom

On 4/18/2020 at 10:52 AM, tuanphan said:

[data-section-id="5e3bc9210f963716337a1bb2"] .section-background:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-image: linear-gradient(to top, #182043, transparent);
}

 

Thanks for the help with this and the different logos in headers.  Your solution was spot on there @tuanphan.

Attached are the screenshots of what I'm seeing and the code injection.  Can you provide any insight and what I might be doing wrong?

2 hours ago, ArcherDesign said:

Hi @tuanphan

I'm completely new to CSS editor. I'm looking to have a header gradient also.

I tried copying what you wrote above and pasted into the editor (...squarespace.com/config/editor) and hit save but there was no change to the site.

Being so new to this I know I'm doing something wrong. Are you able to help or is there a post I should read before doing anything?

I deleted the code and saved just in case.

Thank you

Dom

Each site needs different code. Can you share link to your site?

1 hour ago, Justen said:

Thanks for the help with this and the different logos in headers.  Your solution was spot on there @tuanphan.

Attached are the screenshots of what I'm seeing and the code injection.  Can you provide any insight and what I might be doing wrong

Add to Home > Design > Custom CSS

Hmm, Doesn't seem to be doing anything now.  Here's what I'm seeing @tuanphan

where is word "[data-section-id"]..

@tuanphan Oh that window had scrolled down.  Attached is the full window.  However, do I need to replace with a different section id?  If so, I'm not sure how to find that.  That may be pretty basic but I'm trying to figure this out without having any coding background.  Thanks!

14 hours ago, Justen said:

@tuanphan Oh that window had scrolled down.  Attached is the full window.  However, do I need to replace with a different section id?  If so, I'm not sure how to find that.  That may be pretty basic but I'm trying to figure this out without having any coding background.  Thanks!

 

Remove above and use this

[data-section-id="5e3bc9210f963716337a1bb2"] .section-background:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-image: linear-gradient(to top,#182043,transparent);
}

Thanks @tuanphan, it is working now.  I'll need to make some tweaks to adjust how far down it goes so it doesn't cover the text.  Initially it was coming from the bottom up so I simply changed it from saying "background image to top" to say "background image to bottom" instead and that fixed it.  My first coding experience! 🙂. 
Can you tell me which elements control which parts of the gradient so I can just experiment and tweak to suit the exact finished product that looks good?  I see where the hex color is that one is easy.  But, What about:

-the overall size or height of the gradient so it gets to 0 before the hero text starts?
-how transparent the different points are on it, etc...?
-or, for future reference...what if I wanted it to start as one color and instead of fading to 0, the gradient is from one color to a different color?

Lastly, what do I need to do to be able to use that on other sites I'm working on?  I added it to another site and it didn't do anything?  I will probably use this technique on all of my sites.

Thanks for sticking with this.  You've been a tremendous help.

@tuanphan
I also noticed that it did not apply to the other pages on the Exterior Restorations site.  How can I choose to have it be applied to other pages?  For that site in particular, I would want it on every page expect the blog pages I believe.

Thanks.

Replace id in above code.

You can hover on any sections > Right Click > Inspect Element > In bottom left box > Scroll down > find line: data-section-id="...."

And if I want to have that apply to multiple pages on a site, can I insert all of the section ID's separated by comma?

@tuanphan

7 minutes ago, Justen said:

And if I want to have that apply to multiple pages on a site, can I insert all of the section ID's separated by comma?

@tuanphan

[data-section-id="id1"], [data-section-id="id2"], [data-section-id="id3"] {
  .section-background:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background-image: linear-gradient(to top,#182043,transparent);
  }
}

Ok easy enough on the multiple ID's.  What about the overall height?  Right now it looks like it's the full height of the image.  I need to be able to shorten it to stop before the hero text in the middle.  I tried experimenting with the z-index value but that didn't seem to do it.  So, if I can shorten it either end or fade to 0 where I have the pink line in the screenshots attached, that will allow me to apply this to all of the other pages and it won't matter the height of the image on the secondary pages and it will be a consistent styling on all the pages. 
Thanks @tuanphan

Hi @tuanphan, I wanted to check in and see how I can control the overall height of the transparent gradient?  I would like it to sit behind the top nav, or slightly below the nav but not the entire hero image.  Roughly about the height of the pink line in the previous image.  If there is a way to control and experiment with it that would be good so I can use it at different sizes on different sites.

Thanks.

27 minutes ago, Justen said:

Hi @tuanphan, I wanted to check in and see how I can control the overall height of the transparent gradient?  I would like it to sit behind the top nav, or slightly below the nav but not the entire hero image.  Roughly about the height of the pink line in the previous image.  If there is a way to control and experiment with it that would be good so I can use it at different sizes on different sites.

Thanks.

Too many notifications, missing your noti. I will check again tonight.

Not a problem.  Much appreciated.

You can play with this https://cssgradient.io/

@tuanphan I played around with that site and tried to drop in the code but it did not work like the code you shared.  I tried inserting it in both places but no luck.  The code CSSGradient.io spits out is different than what you shared.  Is there any other way to experiment with the code you shared?  Particularly with the height of the gradient.  

Thanks for the help!

Hi @tuanphan

I'm still trying to achieve the desired result of just displaying behind the nav.  I'm only needing the gradient transparency behind the top nav but was unable to get the CSSGradient.io 's code to work at all.  So, do you have any other ideas on a way to get this to appear either only behind the nav -or- a way to tweak the code you provided that did work over the entire hero image where I can adjust the fade points to accomplish the desired result of just showing behind the nav?

Thanks.

Hi @tuanphan,

I hope you're doing well.  I'm sure you are really busy with notifications so I'm just gently calling out this thread.  The last piece to getting this site launched is being able to have a gradient that is just behind the top nav instead of the entire header section.  I will likely use this for most of my sites.  Is there a way to do that?

Thank you.

try

[data-section-id="5e3bc9210f963716337a1bb2"] .section-background:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-image: linear-gradient(to bottom,#182043 0%, #182043 20%,transparent 50%);
}

Hi @tuanphan, That new code worked well.  It sits behind the header and allows me to adjust the values to accomplish exactly what I'm looking for.  Thank you!

When I just insert it with just the data-section-id for the homepage, it works great.  However, when I add in all of the other pages as you outlined above and Save, it tells me that there is a Syntax Error on line 1.  

Any idea what I'm doing wrong based on the screenshots? There are several section id's so I took a screenshot and scrolled.

Thanks.

Can you paste all code here?