设置元素为背景时z-index失效问题求助

我尝试将Particle JS设置为Hero区域的背景，查阅诸多论坛后，看到的通用CSS解决方案均为：

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

但将这段CSS应用到我的项目后并未达到预期效果——只要设置z-index: -1，元素就会直接消失。我还尝试过position: fixed;、position: relative;等定位方式，都没有效果。

我的源代码可在Codepen查看，地址：https://codepen.io/mejiabrayan/pen/NWYooJR

恳请各位提供可行的解决方案。

内容的提问来源于stack exchange，提问作者Elliot