I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks:
The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows:
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgb(17, 218, 94, 0.4);
animation: animate 25s linear infinite;
bottom: -150px;
}
...
...
The particle effect was obtained from a website and each <li> element was manually assigned an animation. I am using React, and my React code looks like this:
return (
<div className="area w-screen">
... // React JSX Code Here
</div>
);
My question is, how can I adjust the particle effect so that it appears below my other content on the page?