Cover disables the background elements

[prazzo101]

Hello!
I’ve included a javascript that creates a particle animation as a background element on my website and a linear color gradient that is created by CSS. When I activate the cover feature, the color gradient and particle.js get disabled.

I’ve found this topic and tried that solution, but it didn’t do anything.
I am already using the z-index for different parts of the website to have the particles overlapping certain elements, so I am not quite sure if I am breaking something by doing this :)

What should I try to do to fix this?
Thank you!!

[prazzo101]

I found a way to fix this, just if anyone run into the same problem as I did.

1. Put the particle-Animation in front of the other elements by adding a higher z-index value and changing the position to fixed since I didn’t want it to move when I’m scrolling down

#particles-js {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
}

2. Moving the gradient from the body-Element to #grid

#grid {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

background: linear-gradient(270deg, #ffc647, #FB4647, #ffffff);
background-size: 800% 800%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;

}

That did the trick for me.

If I did something stupid and there is a much better way to do it, please let me know :)

[arminunruh]

good job !

[prazzo101]

@arminunruh Doesn’t work for mobile though :(
I had to disable Cover for mobile, otherwise the gradient in the background would be disabled again.

Is there a way to make that work on mobile too?

[arminunruh]

try to use the inspector of your browser and use custom css

i dont have time to come up with custom css for you :/