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.
ParticleJS is JavaScript library for the Particle Device Cloud API for Node. js and the browser. It's open source so you can edit, change or even send in pull requests if you want to share!
js. A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With