Particle not at the good place

[FelixINX]

Hi,

I am trying to make Particle JS work as a background. As you can see on my website, the body as the attribute particles but, the particles are only after the content. It dosen't follow the order. Here is the config:

particlesJS("particles-js", {
    particles: {
        number: {
            value: 80,
            density: {
                enable: !0,
                value_area: 800
            }
        },
        color: {
            value: "#ffffff"
        },
        shape: {
            type: "circle",
            stroke: {
                width: 0,
                color: "#000000"
            },
            polygon: {
                nb_sides: 5
            },
            image: {
                src: "img/github.svg",
                width: 100,
                height: 100
            }
        },
        opacity: {
            value: .5,
            random: !1,
            anim: {
                enable: !1,
                speed: 1,
                opacity_min: .1,
                sync: !1
            }
        },
        size: {
            value: 3,
            random: !0,
            anim: {
                enable: !1,
                speed: 40,
                size_min: .1,
                sync: !1
            }
        },
        line_linked: {
            enable: !0,
            distance: 150,
            color: "#ffffff",
            opacity: .4,
            width: 1
        },
        move: {
            enable: !0,
            speed: 6,
            direction: "none",
            random: !1,
            straight: !1,
            out_mode: "out",
            bounce: !1,
            attract: {
                enable: !1,
                rotateX: 600,
                rotateY: 1200
            }
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: !0,
                mode: "grab"
            },
            onclick: {
                enable: !0,
                mode: "push"
            },
            resize: !0
        },
        modes: {
            grab: {
                distance: 140,
                line_linked: {
                    opacity: 1
                }
            },
            bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
            },
            repulse: {
                distance: 200,
                duration: .4
            },
            push: {
                particles_nb: 4
            },
            remove: {
                particles_nb: 2
            }
        }
    },
    retina_detect: !0
});

Thanks!

[VincentGarreau]

Hey @FelixINX,

To set the particles at the background you have to create an empty div with the particles.js class with a fixed or absolute position, like on this page (check the #particles-js div) : http://devserver.me/pjs/issue-fullpage/

[FelixINX]

This dosen't seem to work, here is the repo of my website : https://github.com/FelixINX/felixinx.me

Maybe is the CSS of my template fault?

[VincentGarreau]

Add top and left:

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

[FelixINX]

Yes it works! But, it is on top of my content, have you any idea?

[VincentGarreau]

On your content div:

.is-loading {
  z-index: 100;
  position: relative;
}

[FelixINX]

Works now on local. Will be pushing online soon.

Thank you very much! And, particle.js is just, awesome!

[PraeLabs]

Hi I managed to do this but having it as a background disables all interactions. Is that normal? Thanks

[funduval]

Hi. I LOVE particles--thank you for all the hard work on it! I am, however, having trouble seeing them after deployment to Github pages. In my browser it works beautifully (using "gulp dev" to hot reload a startbootstrap-resume theme)--any ideas about what this could be?

[ugurkoysuren]

I have that same problem, adding it on the background disables the interactions. How can i solve it?

[duval-ops]

You can push it to the back using z-index. My problem is slightly different and has to do with transpiling (build pack) because particles has its own set-up and start-bootstrap are developed with gulp. I guess I'm not understanding how to incorporate this in a build file for production.

[ugurkoysuren]

I found the solution, I pushed my main container back like you said and the particlejs on the front, so that the particle.js is between my main container and content container.

Thank your for your reply.

[duval-ops]

Yay! Glad it worked.

[guardasite]

Thank you solved my problem.

[snowleopardAlexa]

THANK YOU SO MUCH! You are great! I've been looking for a solution for so long and I couldn't find it! I am so glad! I am also experimenting with particles - changing shapes into starts, and colors. It is wonderful! THANK YOU, VINCENT!