title: particle.js background in flex container
body: <p>EDIT: Ive reworded my question a bit in hopes of getting more of a response. Basically all I need at this count is a flex container that holds the items just as mine does, with particlesJS in the background.Even if someone can just make a flex container with the particles as the background, I could probably figure it out from there.</p>
  
  <p>PEN <a href="https://codepen.io/marti2221/pen/zdjGJZ" rel="nofollow noreferrer">https://codepen.io/marti2221/pen/zdjGJZ</a></p>
  
  <pre><code>&lt;div id="particles-js"&gt;
  &lt;div class="container"&gt;
  &lt;div class="left"&gt;
  &lt;div class="svg-container"&gt;
    &lt;div class="svg-logo"&gt;
      &lt;svg width="115px" height="60px"&gt;
      &lt;rect x="3" y="3" rx="3px" ry="4px" width="52.2px" height="52.2px"
  style="fill: aqua;stroke:aqua;stroke-width:1px;opacity:0.82" /&gt;
      &lt;text x="21.5" y="33.6" font-family="sf-san-francisco" font-
  size="20" stroke="black" fill="black"&gt;T&lt;/text&gt;
      &lt;rect x="61.2" y="3" rx="4px" ry="4px" width="52px" height="52px"
  style="fill:none;stroke:white;stroke-width:2.4px;opacity:0.82" /&gt;
      &lt;text x="79" y="33.6" font-family="sf-san-francisco" font-size="20" 
  fill="white"&gt;R&lt;/text&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="question-container"&gt;
    &lt;p class="questions" id="border-bottom"&gt;WHO AM I?&lt;/p&gt;
    &lt;p class="questions" id="border-top"&gt;WHAT DO I DO?&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="middle"&gt;
  &lt;div class="top"&gt;
    &lt;nav&gt;
      &lt;a&gt;Link1&lt;/a&gt;
      &lt;a&gt;Link2&lt;/a&gt;
      &lt;a&gt;Link3&lt;/a&gt;
      &lt;a&gt;Link4&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div class="bottom"&gt;
    &lt;h1&gt;I am an extremely&lt;/br&gt; passionate User Interface&lt;/br&gt; Design + 
  Developer&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
  &lt;h2 class="name"&gt;TRAVIS MARTIN&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script 
  src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"&gt;
  &lt;/script&gt;
  
  .container{
  display: flex;
  height: 100vh;
  }
  
  #particles-js{
  height: 100vh;
  width: 100vw;
  background-image: 
  url('https://www.hdwallpapers.net/wallpapers/molecular-
  structure-wallpaper-for-1280x800-69-739.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  }
  
  
  
  .left{
  display: flex;
  flex: 1;
  background: rgba(9, 0, 31, 0.82);
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  }
  .svg-container{
  display: flex;
  flex-grow: 1;
  width: 100%;
  padding-left: 80px;
  }
  
  /*.svg-logo{
  display: flex;
  flex-grow: .25;
  
  background: teal;
  }*/
  
  
  
  .question-container{
  display: flex;
  flex-grow: 1;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 40px;
  }
  
  .questions{
  display: flex;
  margin:0 1px 0 0;
  color: white;
  font-size: 12px;
  }
  #border-top{
  border-top: 2px solid white;
  padding: 15px; 
  
  }
  #border-bottom{
  padding: 13px;
  padding-right: 28px;
  }
  
  
  .middle{
  display: flex;
  flex: 3;
  
  flex-direction: column;
  }
  .top{
  display: flex;
  flex: 1;
  }
  nav{
  display: flex;
  flex-direction: column;
  margin: 50px 0 0 65px;
  color: white;
  
  }
  
  a:before {
  content: '\2014';
  position: absolute;
  margin-left: -40px;
  }
  a{
  margin: 10px 0 10px 0;
  font-size: 22px;
  }
  
  
  .bottom{
  display: flex;
  flex: 1;  
  }
  h1{
  margin-left: 25px;
  font-size: 55px;
  color: white;
  }
  
  
  .right{
  display: flex;
  flex: .37;
  background: rgba(6, 2, 28, 0.94);
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  }
  
  .name{
  display: flex;
  transform: rotate(-180deg);
  background: pink;
  writing-mode: tb-lr;   
  writing-mode: vertical-lr;
  font-size: 65px;
  align-items: center;
  
  color: white;
  }
  
  var options = {"particles":{"number":{"value":99,"density":
  {"enable":true,"value_area":552.4033491425909}},"color":
  {"value":"#ffffff"},"shape":{"type":"circle","stroke":
  {"width":0,"color":"#000000"},"polygon":{"nb_sides":3},"image":
  {"src":"img/github.svg","width":70,"height":100}},"opacity":
  {"value":1,"random":true,"anim":
  {"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":
  {"value":2,"random":true,"anim":
  {"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked"
  {"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,
  "width":1},"move":
  
  {"enable":true,"speed":1.5782952832645452,"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":false,"mode":"repulse"},"onclick":
  {"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":
  {"distance":400,"line_linked":{"opacity":1}},"bubble":
  {"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},
   "repulse":{"distance":200,"duration":0.4},"push":
   {"particles_nb":4},"remove":
   {"particles_nb":2}}},"retina_detect":false};
  
   particlesJS("particles-js", options);
  </code></pre>