z-index not working when trying to set an element as a background

Issue

As the title says, I'm trying to set particle js as a background for my hero section. I've looked through many forums and always see the same solution in CSS:

 position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;

However, adding the same CSS to my project doesn't work as expected. Every time I use z-index: -1; it disappears. I've even tried position: fixed; position: relative; and to no avail.

Any suggestion would be greatly appreciated.

Here is the link to my source code on codepen

Solution

your #bg element is work properly and it is on the back of your main section.

but there is another element .bg-dark which has non-transparent background-color on top layer of #bg which you see that.

you can simply remove bg-dark class from all container div inside of main like these :

screenshot1 , screenshot2

Answered By - Alireza Mohammadi