Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
skabir91

Add a transparent gradient overlay to individual sections?

Question

Site URL: https://shuvamkabir.net

I'm attempting to add a white gradient above my background images. My first thought is to add an additional element that serves as an intermediate layer. I've tried the following, which I copied from here :

[data-section-id="xxxxxxxxxxxxxxx"]{ 
  .section-background::after{
  content:"";
  display:block;
  position:relative;
  width:100%;
  height:100%;
  /* in hsla color format (below), the last number is between 0 and 1 and changes the opacity */
  background-color:hsla(100,20,50,.5) !important; 
  }
}

And then replace the background-color() with a linear-gradient() instruction. However, the above code doesn't seem to work. I should add that I am also using javascript to create a parallax effect, which I am hoping isn't conflicting.

Can anyone walk me through adding an additional element behind my text/image blocks and above my background to which I can add a gradient that shifts from white-to-transparent-to-white?

Alternatively, can anyone show me how to make an image block flush with with the top of a section (so I can just stick a small PNG at the top and bottom of my sections and call it good)?

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1
[data-section-id="5edbdd7789d95f3735d2f0ed"] .section-background-overlay {
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%) !important;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
4 hours ago, tuanphan said:

replace 


[data-section-id="xxxxxxxxxxxxxxx"]

with


[data-section-id="xxxxxxxxxxxxxxx"] .section-background

Thank you for your response. Unfortunately, that didn't seem to have any effect. There's no discernible element added.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...