title: Particle JS - Covering the full page
body: <p>I have implemented Particle JS on the link attached. It is meant to be contained within the banner and then beneath it will be white background with the header text &quot;hello there&quot;. For some reason the Particle.JS effect is taking over the full page background. Anyone know how to stop this?</p>
  <p><a href="https://codepen.io/mattrees92/pen/vYmKvNo" rel="nofollow noreferrer">https://codepen.io/mattrees92/pen/vYmKvNo</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>particlesJS("particles-js", {
    "particles": {
      "number": {
        "value": 355,
        "density": {
          "enable": true,
          "value_area": 789.1476416322727
        }
      },
      "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": 0.48927153781200905,
        "random": false,
        "anim": {
          "enable": true,
          "speed": 0.2,
          "opacity_min": 0,
          "sync": false
        }
      },
      "size": {
        "value": 2,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 2,
          "size_min": 0,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 0.2,
        "direction": "none",
        "random": true,
        "straight": false,
        "out_mode": "out",
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "bubble"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 83.91608391608392,
          "size": 1,
          "duration": 3,
          "opacity": 1,
          "speed": 3
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100%;
      overflow-x: hidden;
  }
  
  header {
      width: 100%;
      height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      background-size: cover;
  }
  
  #particles-js canvas {
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      background-color: black;
      background-size: cover;
  }
  
  
  .container {
      flex-wrap: wrap;
  }
  
  h1 {
      width: 100%;
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 72px;
  }
  
  h2 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 24px;
  }
  
  .btn-primary {
      font-size: 1.25rem;
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      display: inline-block;
      padding: 0.5em 1em;
      margin-top: 1em;
      color: #EB429C;
      background-color: transparent;
      border: #EB429C 0.125em solid;
      cursor: pointer;
      text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
      box-shadow: inset 0 0 0.5em 0 #EB429C, 0 0 0.5em 0 #EB429C;
      position: relative;
      transition: background-color 100ms linear;
  }
  
  .btn-primary::before {
      pointer-events: none;
      content: '';
      position: absolute;
      background: #EB429C;
      top: 120%;
      left: 0;
      width: 100%;
      height: 100%;
  
      transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
      filter: blur(1.5em);
      opacity: 0.25;
  
  }
  
  .btn-primary::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: 0 0 1em 0.5em #EB429C;
      opacity: 0;
      transition: opacity 100ms linear;
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
      color: black;
      background-color: #EB429C;
      border: #EB429C 0.125em solid;
      text-shadow: none;
  }
  
  .btn-primary:hover::before {
      opacity: 1;
  }
  
  .btn-primary:hover::after {
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"&gt;&lt;/script&gt;
  &lt;header&gt;
    &lt;div id="particles-js"&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt; Test Bed &lt;/h1&gt;
        &lt;h2&gt;Sub text to go here&lt;/h2&gt;
        &lt;button class="btn-primary"&gt; CONTACT US &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class="container"&gt;
    &lt;h1&gt;Hello there&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>