Blend header banner with background

spbb · October 19, 2022

Hi,

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

Thanks!

joseph81 · October 21, 2022

Can you provide us with a website link? Usually these kinds of solutions include a gradien overlay applied on top of the image that goes from transparent to that color(top to bottom).

spbb · October 24, 2022

Sure thing. It is slowpouryeg.com -- the section I'm concerned about is the "About" page.

Use "SPbb$2022!" to see the site

Thanks again,

joseph81 · October 26, 2022

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;
    }
}

spbb · October 31, 2022

Wow, thank you very much. This worked perfectly. I would never have figured this out without your help.

Cheers!

Blend header banner with background

Recommended Posts

spbb

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

joseph81

spbb

joseph81

Link to comment

spbb

Link to comment

joseph81

Link to comment

spbb

Link to comment

Create an account or sign in to comment

joseph81

spbb

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources