title: Overlay particles.js on fullscreen div
body: <p>I am using the following .js plugin: </p>
  
  <p><a href="https://github.com/VincentGarreau/particles.js/" rel="nofollow">https://github.com/VincentGarreau/particles.js/</a></p>
  
  <p>With bootstrap 3's jumbotron, I have got the plugin working and my jumbotron is fullscreen when you get to my homepage (I think this is the issue) I am trying to run particles.js UNDER my jumbotron but for some reason the particles generate a whole viewport underneath my jumbotron. Like it is set up in it's own DIV after my jumbotron unit but I have <code>&lt;div id="particles-js"&gt;&lt;/div&gt;</code> wrapped around my jumbotron DIV. Which is where I get lost, the way I have it set up it should display underneath my jumbotron content and everything.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="particles-js"&gt;
      &lt;div class="jumbotron"&gt;
          &lt;div class="container center-vertically"&gt;
              &lt;div class="col-lg-6 col-lg-offset-3 text-center"&gt;
                  &lt;h1&gt;
                      A template with a bit of a different &lt;strong&gt;look &amp;amp; feel&lt;/strong&gt;.
                  &lt;/h1&gt;
                  &lt;hr&gt;
                  &lt;p&gt;Particles is a fun and multipurpose template, with clean &amp;amp; modern design &lt;i&gt;+&lt;/i&gt;&amp;nbsp; code.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS for the jumbotron as well as the particles-js ID:</p>
  
  <pre><code>.jumbotron { 
      height: 100%;
      width: 100%;
      font-family: 'Roboto', sans-serif;
      color: #fff;
      padding-top: 79px;
      padding-bottom: 0;
      display: table;
  }
  
  #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
      background: #6819e8; /* Old browsers */
      background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */ 
  }
  
  .center-vertically {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>I have also uploaded a live version so it is easier to view the problem:</p>
  
  <p><a href="http://aliensix.com/company/" rel="nofollow">http://aliensix.com/company/</a></p>