Particles.js: particles are not appearing as background.

[ghost]

I tried to vary the z-index as some suggested in stack-overflow, but still the canvas appears only after the div container. How to make it appear as the real background for my contents.?

[moromer90]

Any suggestions?

[J-Mills]

You need to set the div of the particles position as 'absolute' and then subsequent divs with 'relative'. Hope this helps!

[moromer90]

What I've done and it worked is

body>

div id="particles-js" width="100%" height="100%">
canvas class="particles-js-canvas-el" width="1583" height="497" style="width: 100%; height: 100%;">/canvas>/div>
div id="asd">!-- here I put the main body of page -->/div>
and css
canvas {
display:block;
position: fixed;
z-index: -10;
}'''

[J-Mills]

Does this retain the ability to interact with the particles as well? I guess the downside there is you can't have a div under the particles too, right?

[moromer90]

I can't interact - it's true

[J-Mills]

Hey! Just in case you were interested, I found the solution to keeping the interactivity on the particles regardless of what elements are in front of the canvas.

https://github.com/VincentGarreau/particles.js/issues/87 - The creator outlines how to do it here. But essentially in the "Interactivity" section of your JSON or particles.js config, replace the word 'Canvas' with 'Window'.

[moromer90]

Thanks. that was useful

[elibroftw]

This worked for me. Put this after the content you don't want to have the particles as the background.

<div style="position: absolute; width: 100%; height: 100%;" id="particles-js"></div>