Why is my particle JS effect not working for the whole site and just for 100vh?-CodePudding

I am creating a site where I want a certain background particle effect created using Particle JS to be all over the site (as I add more content to the site, I want the effect to be spread all over the site) but right now the effect is visible only for 100vh height

As soon as I scroll down my background turns plain black color and the effect is gone. What changes should I make to the code to show the background effect all over the site? I am sharing the code below

window.onload = function () {
  Particles.init({
    selector: ".background"
  });
};
const particles = Particles.init({
  selector: ".background",
  color: ["#03dac6", "#ff0266", "#000000"],
  connectParticles: true,
  responsive: [
    {
      breakpoint: 768,
      options: {
        color: ["#faebd7", "#03dac6", "#ff0266"],
        maxParticles: 43,
        connectParticles: false
      }
    }
  ]
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #home{
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: 'Fira Code', monospace;
      height: 200vh;
      position: relative;
      background-color: #000000;
      padding: 0 5em 0.01em;  
  }

  h3.span {
    font-size: 3.5vw;
    letter-spacing: 0.03em;
    font-weight:100;
    color: #faebd7;
    z-index: 6;
    user-select: none;
  }
  .background {
    position: absolute;
    height: 200vh; /* Still Particle JS is only till 100vh wtf */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
  .loader span {
    color: #faebd7;
    text-shadow: 0 0 0 #faebd7;
    -webkit-animation: loading 1.2s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes loading {
    to {
      text-shadow: 15px -10px 90px #ff0266;
      color: #ff0266;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>   
</head>
<body>
    <section id="home">

    <h3  id="name-id">
    <span >n</span><span >a</span><span >m</span><span >e</span><span >:</span><span >&nbsp;</span><span >"</span><span >s</span><span >i</span><span >t</span><span >e</span><span >"</span><span >;</span>
    </h3>
                <h3  id="code-id">
    <span ">c</span><span ">o</span><span ">d</span><span ">e</span><span >s</span><span >:</span><span >&nbsp;</span><span >t</span><span >r</span><span >u</span><span >e</span><span >;</span>
                </h3>
    </section>
    <canvas ></canvas>
            <!--JS-->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js">             </script>

</body>
</html>

CodePudding user response：

It looks like what you need to do is just change position absolute to fixed for the .background styles. I also removed the height property.

window.onload = function () {
    Particles.init({
      selector: ".background"
    });
  };
  const particles = Particles.init({
    selector: ".background",
    color: ["#03dac6", "#ff0266", "#000000"],
    connectParticles: true,
    responsive: [
      {
        breakpoint: 768,
        options: {
          color: ["#faebd7", "#03dac6", "#ff0266"],
          maxParticles: 43,
          connectParticles: false
        }
      }
    ]
  });

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #home{
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: 'Fira Code', monospace;
      height: 200vh;
      position: relative;
      background-color: #000000;
      padding: 0 5em 0.01em;  
  }

  h3.span {
    font-size: 3.5vw;
    letter-spacing: 0.03em;
    font-weight:100;
    color: #faebd7;
    z-index: 6;
    user-select: none;
  }
  .background {
    position: fixed;
 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
  .loader span {
    color: #faebd7;
    text-shadow: 0 0 0 #faebd7;
    -webkit-animation: loading 1.2s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes loading {
    to {
      text-shadow: 15px -10px 90px #ff0266;
      color: #ff0266;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    
    <!--JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js">             </script>

</head>
<body>
    <section id="home">

    <h3  id="name-id">
    <span >n</span><span >a</span><span >m</span><span >e</span><span >:</span><span >&nbsp;</span><span >"</span><span >s</span><span >i</span><span >t</span><span >e</span><span >"</span><span >;</span>
    </h3>
                <h3  id="code-id">
    <span ">c</span><span ">o</span><span ">d</span><span ">e</span><span >s</span><span >:</span><span >&nbsp;</span><span >t</span><span >r</span><span >u</span><span >e</span><span >;</span>
                </h3>
    </section>
    <canvas ></canvas>
    
</body>
</html>