Search code examples
javascripthtmlparticlesparticles.js

Expand particles.js to background


I bought a template and I'm modifying it to make my website, I'm a designer, and I do not have much idea of code but I want to learn and I decided to venture into making the web like this. I want to put the plugin particles.js as background, I managed to put it in the index but I have been put like this and I have no idea how to do to expand it. As if in photoshop take it from a corner and drag to occupy the whole background.

Here's the problem:
Here's the problem

And here's the particle.js div onto index.html:

<div id="particles-js"
     style="background-color: #000; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: 100%;">
     <canvas class="particles-js-canvas-el"
            style="width: 100%; height: 100%;" width="1617" height="708">
     </canvas>
</div>

It's located above scripts and below the footer.


Solution

  • All you need is some CSS to position the <div>. Add this to your <style> tag. A good place to start when you get stuck in the future is the W3 Schools CSS intro. Best of luck!

    /* the #id of your div */
    #particles-js {
        /* stay in a constant spot on the page, regardless of scroll */
        position: fixed;
        /* fill the entire page */
        width: 100%;
        height: 100%;
        /* remove the space along the edges */ 
        margin: 0;
        padding: 0;
        /* position it to start at the top of the page */
        top: 0;
        /* put it behind other content */
        z-index: -1;
    }
    

    enter image description here