Struggling to get particles.js working

Design help Custom code
1

Hello everyone, :wave:

I’m working on a new website for my company and struggling to integrate particles.js into my website.

I’ve the id “particles-js” on my hero div and the code in my page header settings.
There is no error in the console, it’s just that nothing is happening.

Here is the live-link:
https://bloom-212129.webflow.io/

Here is the read-only link:
https://preview.webflow.com/preview/bloom-212129?utm_medium=preview_link&utm_source=designer&utm_content=bloom-212129&preview=4ef636a810e7ff1c168f8a72f9903701&workflow=preview

And here is my code :
https://codepen.io/JoachimBrindeau/pen/wvmdgEM

What did I do wrong?

Thank you very much for the help.
Joachim

PS: I’ll rename my divs later. :innocent:

2

Move your particles JavaScript from the head to the before body close area.

2 Likes
3

Hello!

Thanks, it’s now showing!
I’m making progress but I have a new issue.

I’ve put my header inside the #particles-js div
image

I expected the particles to show as background but it’s now showing below the actual header instead of behind…

image
image1039×797 75.6 KB

Here is my read-only link.
Any idea?

Thanks a lot ! :pray:

4

Here is the code I used to solve the second issue:

<style>
#particles-js {
    z-index: 10;
}
canvas.particles-js-canvas-el {
    position: absolute;
    top: 0;
}
</style>