Create a background gradient in 7.1 from first section through header

I want to create a background gradient from bottom of the first section on a page through the header.

I can get a gradient through the first section using:

<style>
.fluid-engine {
background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40);
}
</style>

but this stops at the header. 

How can I get a consistent gradient from bottom left of the first section through to top right of the header? 

Password for my site is: Callan

Correction. The CSS for a gradient on just the first section of the home page is:

<style>
.fe-64bb3cc5c329b51a58554d1f {
background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40);
}
</style>

Did you solve or still need help?

Hi, no I haven't figured this out yet. 

21 hours ago, Callan said:

Hi, no I haven't figured this out yet. 

 

What is site url? We can check easier

It's: https://rhubarb-plum-w4g9.squarespace.com/

p/w: Callan

Try this code

<style>
  article section:first-child {
    padding-top: 0px !important;
}
</style>

Thank you, that had an effect but the gradient still does not go all the way from top to bottom of the page section. There is still a border top and bottom of the section that is only one shade of dark red. 

On 7/30/2023 at 7:18 AM, Callan said:

Thank you, that had an effect but the gradient still does not go all the way from top to bottom of the page section. There is still a border top and bottom of the section that is only one shade of dark red. 

You mean this bottom

and this top?

Yes, those images are correct. I need the gradient to go from top to bottom of the section and header. 

On 8/1/2023 at 9:27 PM, tuanphan said:

<style>
  article section:first-child .section-background {
    background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40) !important;
}
</style>

That worked, thank you. Appreciate your help! 

@tuanphan I have a similar issue and can't seem to figure out to fix it! I have a gradient header, and made the opacity 100% for the 1st section background. But I want to get ride of the weird line showing between header and section #1. Any idea?

Website : www.cafe-club.squarespace.com

password: cafeclub

On 2/6/2024 at 4:15 AM, HOMENCREATIVE said:

@tuanphan I have a similar issue and can't seem to figure out to fix it! I have a gradient header, and made the opacity 100% for the 1st section background. But I want to get ride of the weird line showing between header and section #1. Any idea?

Website : www.cafe-club.squarespace.com

password: cafeclub

You can use this CSS code

.header-dropshadow {
    box-shadow: unset !important;
}

@tuanphan works perfect, thanks kindly!