title: How can I set react-particles-js as the background while using React?
body: <p>I have everything setup already, I just don't know of a way to make the  element created by react-particles-js act as the background.</p>
  
  <p>Here is the code I have so far: </p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Route } from "react-router-dom";
  import NavTabs from "./components/NavTabs";
  import Home from "./components/pages/Home";
  import About from "./components/pages/About";
  import Contact from "./components/pages/Contact";
  import ParticlesContainer from "./components/ParticlesContainer";
  
  
  function App() {
    return (
      &lt;ParticlesContainer&gt;
      &lt;Router&gt;
        &lt;div&gt;
          &lt;NavTabs /&gt;
          &lt;Route exact path="/" component={Home} /&gt;
          &lt;Route exact path="/about" component={About} /&gt;
          &lt;Route path="/contact" component={Contact} /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
      &lt;/ParticlesContainer&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>However, none of the content shows; only the canvas element is visible while the rest seems to not render at all.</p>
  
  <p>EDIT: Here is the ParticleContainer code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import Particles from 'react-particles-js';
  
  
  class ParticlesContainer extends Component {
  render() {
      return ( 
          &lt;Particles 
              params={{
                  "particles": {
                      "number": {
                          "value": 150,
                          "density": {
                              "enable": true,
                              "value_area": 1803.4120608655228
                          }
                      },
                      "color": {
                          "value": "#ffffff"
                      },
                      "shape": {
                          "type": "circle",
                          "stroke": {
                              "width": 2,
                              "color": "#000000"
                          },
                          "polygon": {
                              "nb_sides": 4
                          },
                          "image": {
                              "src": "img/github.svg",
                              "width": 100,
                              "height": 100
                          }
                      },
                      "opacity": {
                          "value": 0.4008530152163807,
                          "random": false,
                          "anim": {
                              "enable": false,
                              "speed": 1,
                              "opacity_min": 0.1,
                              "sync": false
                          }
                      },
                      "size": {
                          "value": 1.5,
                          "random": true,
                          "anim": {
                              "enable": false,
                              "speed": 40,
                              "size_min": 0.1,
                              "sync": false
                          }
                      },
                      "line_linked": {
                          "enable": true,
                          "distance": 0,
                          "color": "#ffffff",
                          "opacity": 0.3687847739990702,
                          "width": 0.6413648243462091
                      },
                      "move": {
                          "enable": true,
                          "speed": 6,
                          "direction": "none",
                          "random": false,
                          "straight": false,
                          "out_mode": "out",
                          "bounce": false,
                          "attract": {
                              "enable": false,
                              "rotateX": 600,
                              "rotateY": 1200
                          }
                      }
                  },
                  "interactivity": {
                      "detect_on": "window",
                      "events": {
                          "onhover": {
                              "enable": true,
                              "mode": "repulse"
                          },
                          "onclick": {
                              "enable": false,
                              "mode": "bubble"
                          },
                          "resize": true
                      },
                      "modes": {
                          "grab": {
                              "distance": 400,
                              "line_linked": {
                                  "opacity": 1
                              }
                          },
                          "bubble": {
                              "distance": 400,
                              "size": 40,
                              "duration": 2,
                              "opacity": 8,
                              "speed": 3
                          },
                          "repulse": {
                              "distance": 100,
                              "duration": 0.4
                          },
                          "push": {
                              "particles_nb": 4
                          },
                          "remove": {
                              "particles_nb": 2
                          }
                      }
                  },
                  "retina_detect": true
              }} /&gt;
      )
  }
  }
  
  export default ParticlesContainer;
  </code></pre>