Particles.js as a background?

Question

I'm trying to use this example as a background but I can't seem to get it to work.

http://vincentgarreau.com/particles.js/#nasa

In order to get around this I'm forced to use a margin top of -1500px just to place my text over the top of it and it's causing major issues with responsiveness.

Does anyone have any idea on how I can use it strictly as a background?

The creator of the plugin has done it here on his website.

http://vincentgarreau.com/en

You can tell because when you inspect it, there is no "canvas" hovering over the top as there is on the CodePen example.

Answer 1

I just managed to do this with the next css code, just as the creator does in his nasa page:

body,
html {
    height: 100%
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}

Then I wrote <div id="particles-js"></div> just after the body opening tag. Note that you can't see the canvas class because it's being generated by the particles.js library.

Canvas creation code fragment