CSS interfering with scrollevents on page

[roelvanhouten]

Hi,

I recently asked a question about an interactive JS background interfering with the scrollevents on my page (menu not showing, parallex effects not working, etc.):

JS as background without interfering with mousevents

Hi, I’m currently designing a one-page website for which I would like to use jQuery to add a radial gradient that follows the mousepointer. I’ve managed to achieve the effect I want by adding the Javascript and the CSS to the Page JS and Page CSS. I’ve added the class to the “Body CSS Class(es)”, because I want it to apply to the entire page. Unfortunately the mouse-events of my JS interfere with the mousevents of the Theme. Parallax scrolling, links to anchors, etcetera. Is this something y…

My goal is to have a gradient background behind ALL sections, without stretching it out accross the entire website, but rather scaled to the viewport.

Since I don’t have the budget to purchase the One service, I decided to look for a simpler solution. After trying to change the background to a simple css gradient, I found out that it’s either the position element set to static, or the height element set to 100vh that’s causing the issue. I’ve put the CSS in Custom Page CSS and the class in the Body CSS Class(es) in order to put it in the background of the entire page.

I understand that custom code is outside the scope of my unlimited PRO license, but I do hope you’ll be able to give me a push in the right direction now that I’ve provided the specific cause of my issue