Particles.js: Particle.js works well, but not in the correct div

[hugo-pcq]

Hi Everyone ! :smile_cat:

I'm currently working with particles.js (Short Documentation : https://github.com/VincentGarreau/particles.js/), on a one page template with consequently a few different section. So I'm trying to implement this js library in my website.

I know I use the lib correctly because it works well on my first div, on my first website page. (cf website screenshot: https://www.noelshack.com/2019-07-3-1550019179-first-div-first-page-no-problem.png (Yes, it's very light but you can see it haha) and the screenshot of the code : https://www.noelshack.com/2019-07-3-1550020026-first-div-first-page-no-problem-code.png).

It definitely works well. So, the problem is coming now.

When I try to do the same thing on an other div later in the code (on the background that a submission form) (cf screenshot : https://www.noelshack.com/2019-07-3-1550020687-div-problem-code.png https://www.noelshack.com/2019-07-3-1550020679-div-problem-website1.png), the module particle.js is printed at the bottom of my website page (cf screenshot : https://www.noelshack.com/2019-07-3-1550020758-div-problem-website2.png). It should be print in the background of the wanted div, as my first div (cf second screenshot), not at the bottom :thinking:

(Btw, yes the id name "particles-js1" is different than the first name id "particles-js" in the first screenshot, only because by deduction of my previous problems in this code, I think you can't call 2 times the same script "particle-js" in the same document) Anyway, that's not the point.

If someone can help me to fix this issue and help me understand why the lib particle.js is loaded at the bottom and not in the correct div background, I'll be very grateful.

Thank you in advance guys !

[noraj]

Same for me, only working as the first div and seems not able to be added as background.

[ClintOxx]

it should work if you set the css to position: fixed;

when i had it set to absolute i had tons of problems of it not rendering correctly

[tycooperaow]

Same here, How do you fix the rendering issue?

I know when I resize the window it works as intended

[JoniVR]

Based on @ClintOxx 's comment, this worked for me:

#particles-js {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    position: fixed;
    z-index: 0;
}