Jump to content

Blend header banner with background

Go to solution Solved by joseph81,

Recommended Posts



I'm wondering if there is any way to blend my header image / banner into the background colour below? So, at the bottom of my header image there would a smooth blend into the rest of the page? I made the background of the banner the same colour as the background colour below, but there is still a visible cut off line between the two sections. 

Any advice would be appreciated


Link to comment
  • Solution

This is the solution for this section:

[data-section-id="62c33c4562158217bb0e2faa"] {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(transparent 77%, var(--siteBackgroundColor) 100%);
      z-index: 1;

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.



Link to comment
  • 1 year 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.