Linear gradient on homepage with different sections

Hi,

I would like to have a linear gradient on only the homepage of my website, with a seamless transition between sections. I don't want to change the color of the footer. For this, I've used the code below, but now the footer is also impacted, as well as all the other pages.

.page-section .section-border, .section-background { background:transparent !important; }
.site-wrapper{background: linear-gradient(#097770, #3CB08C)!important;}

Thanks in advance for your input.

Website: www.webtailor.be
Password: Webtailor2022

2 hours ago, JanRaey said:

Hi,

I would like to have a linear gradient on only the homepage of my website, with a seamless transition between sections. I don't want to change the color of the footer. For this, I've used the code below, but now the footer is also impacted, as well as all the other pages.

.page-section .section-border, .section-background { background:transparent !important; }
.site-wrapper{background: linear-gradient(#097770, #3CB08C)!important;}

Thanks in advance for your input.

Website: www.webtailor.be
Password: Webtailor2022

Try removing your code with the following one

#collection-636508e034a18f7d400d642e main .section-border, #collection-636508e034a18f7d400d642e main .section-background { 
  background:transparent !important; 
}
#collection-636508e034a18f7d400d642e main .site-wrapper{
  background: linear-gradient(#097770, #3CB08C)!important;
}

Support me by pressing 👍 or marking as solution if this is useful for you

My testing

Hi @Beyondspace,

Thanks for your quick response. I've added the code, but the gradient does not seem to have any effect for me...