I’m not sure that this is bug but, I think there is a problem with “body class” in “Pages” general settings.
Problem No1:
Create a class that contain a gradient color
set a class to page settings > general > CSS classes (body)
At my end, gradient didn’t applied to background of a page. In fact the class is exist is the code, but background gradient is not showing.
Problem No2:
1.As instance put this code to your bricks settings custom css:
.home-bg-gradient {
background-image: linear-gradient(30deg, #2451f5, #ff9800, #2597f4, #961068, #401296);
}
2. set a class to page settings > general > CSS classes (body)
3. create a page with some sections
In my case the gradient is repeated vertically, instead of covering the whole page as a single gradient like below.
Add feature request:
Please add gradient option for background of page settings.
When you create a class in Bricks and do not use it on an element (but only use its selector as a custom body class in the page settings) the CSS for this class is not output to the frontend at all – so you won’t see anything. For this please add the CSS globally (like in your problem 2).
Regarding problem 2:
I am pretty sure that the Scroll Smoother you’re using is “breaking” the gradient. Please disable this setting and see if you can still reproduce the issue.
Hi André
Thank you for your respond and the time you spent on this,
Smooth scroller is for BricksForge, I totally disable it for now but everything stay the same as before. So it is not for that reason I think.
Also like Before when I use a class that even I created in custom CSS in Bricks Settings, The Gradient Background has Problem exactly like before (I want it to be like me home page that stretched along the page).
The gradient background is placed in 100vh and repeated every 100vh, instead of one gradient background that covers all the page.
You can test what ever you want in the environment that I emailed to you. (just don’t delete the home page please)
Please Let me know if you make it works, very good if it is in my environment. Just tell me the name of related page.
ok. Seems like this is just how it behaves by default (see Stack Overflow discussion). The discussion also contains possible workarounds.
Adding background-attachment: fixed might solve your problem – at least on Desktop. This setting does not work on mobile devices – as far as I remember.
