Why particles-js does not work correctly?

Question

First I see the content, then I see the particles-js. I want to make sure that I see the particles-js and simultaneously at the same time. I use materialize CSS Code:

<div class="page-wrapper"> <div class="content">.... </div> </div>
<div id="particles-js"> </div>
<!-- Particles JS  -->
<script > .... </script>

Answer 1

Seems like your styles are broken or missing

 particlesJS.load('particles-js', 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/demo/particles.json', function() { //callback }); 

 html { width: 100%; height: 100%; } body { background-color: black; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } #particles-js { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } .my-content { z-index: 1; width: 150px; height: 150px; background-color: white; } 

 <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <div class="my-content"> my content </div> <div id="particles-js"></div>