Why is background body gradient being repeated in sections?

Greetings all,

I set a background image for all pages(Body), added a gradient to it but that gradient is being added one each section! When I remove the gradient from the body, the gradient goes away from the sections! This is kinda confusing me.

This is the page I’m specifically working on (of coruse this is being applied to the whole site) http://einclick.webflow.io/services/mergers-acquisitions

share link https://preview.webflow.com/preview/einclick?preview=66d86a2f153450d4e0429baf04714cf4

So how do I apply a gradient to JUST body background without it being applied to each section??

Hi @DragonDon, thanks for the post. This is a strange behavior for sure ! I am investigating and as soon as there is an update, will post more info.

Hi @cyberdave,

Just checking in, any word or thoughts on this?

Hi @DragonDon, thanks for the followup. I am still checking this, sorry about the delay, I hope to have some further answers soon. I will update asap.

Thanks @cyberdave, I really appreciate it.

Hi @DragonDon, I have been checking this, and to get the background gradient to not repeat, you will need to put in some custom css.

Put this in your Header in your Custom Code tab in Site Settings, save changes and then republish. The gradient should show correctly.

<style>
    html {
    height: 100%;
}
    body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>

Please keep in mind, the gradient will still repeat in the designer mode, because the custom css only loads after publish.

See if that helps. Let me know after you update and I will take another look.

Regards,
Dave

Hi @cyberdave, that seems to have done the trick :slight_smile: Thanks.

1 Like