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.

Unfortunately it wouldn't let me share the link to the codepen. — Milan Maru, Dec 02 '16 at 19:03

Erwol · Answer 1 · 2017-04-17T08:53:35.237

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

Should be marked as `Accepted`. Works flawlessly. [CSSLint](https://github.com/CSSLint/csslint/wiki/Require-properties-appropriate-for-display) complains about the `vertical-align` being ignored due to `display` being set to `block`. Solution works without having `vertical-align` as well. — Neil P., Apr 26 '18 at 16:46

score 10 · Answer 2 · answered Nov 21 '16 at 15:01

10

I've ran into this problem before and fixed it by doing this:

/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
    display:block;
    background: rgb(33,36,50);
    position: fixed;
    z-index: -1;
}

then create a div/main element for your content and add this to it:

mainElementNameHere {
    position: absolute;
}

answered Nov 21 '16 at 15:01

Grey

877
9
29

1

Thanks man, after spending lot time, finally it works. – Rahul Sarma Mar 06 '21 at 06:35

score 5 · Answer 3 · answered Aug 15 '17 at 22:27

Try to use the overflow: hidden; property at the element that you want to put in front of the particles.js;

#main-section {
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.48;
}

score 4 · Answer 4 · answered Jan 01 '18 at 00:15

4

Try this:

#particle_background canvas{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

where your body has id="particle_background"

answered Jan 01 '18 at 00:15

kumail

1,331
4
13
19

score 4 · Answer 5 · answered Jun 28 '19 at 09:31

I've been looking for the same. Now I'll be the first to say I probably didn't do something right following the instruction up here, but I found this and it works perfectly for me.

See this pen by Michael Van Den Berg

#particles-js {
    width: 100%;
    height: 100%;
    background-color: #437993;
    /*background-image: url('');*/
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    
}

canvas {
    display: block;
    vertical-align: bottom;
}

<body>

  <div id="particles-js"></div>
  <div> @*Content you want to be in front goes here*@ </div>

<body>

Raihanul Alam Hridoy · Answer 6 · 2020-05-10T18:48:55.143

If your using particle js for wordpress website and following this link : http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

Then, you may notice that the moving particle are above your content, in that case just give the content (it could be a column/row, or Button, or input field) a “z-index: 5(or more)”

In this picture, the search bar wasn't working. So, I gave

"z-index: 5"

to it. Now it works fine. Also, the particles are responding well.

score 1 · Answer 7 · answered Nov 22 '16 at 14:59

1

You also can implement it like this

<body id="particles-js">
 <div class="something">
  <h1> something here </h1>
 </div>
</body>

in css

.something {
 z-index:1;
}

all the element of particle-js placed at the background. hope useful.

answered Nov 22 '16 at 14:59

gema

523
1
7
17

score 1 · Answer 8 · edited Oct 19 '17 at 06:08

1

In id="particles-js" just add this code to your css:

position: fixed !important;
display: block;

You can add !important to override the previous styles.

edited Oct 19 '17 at 06:08

Nikolaj Dam Larsen

5,455
4
32
45

answered Oct 19 '17 at 05:25

Darwin P

11
1

Particles.js as a background?

8 Answers8

"z-index: 5"

Linked