Particles.Js Not Covering Entire Page

Particles JS is not covering full page

You should add position values to #particle-js

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
  top:0;
  left:0;
}

particles.js not covering entire page

Ok I finally solved the background question:
That's how I managed it (I'm pretty sure I had already tried that but re-building the whole html if finally worked)

CSS

#particles-js{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

HTML

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- SOME CSSs HERE -->

        <link rel="stylesheet" media="screen" href="assets/css/particles.css">

         <!-- SOME SCRIPTS HERE -->
    </head>
    <body>
        <div class="body-particles">

        <!-- Wrapper -->
            <div id="wrapper">
                <!-- MY STUFF HERE, STYLED WITH MY CSS -->
            </div>
        </div>

        <!-- particles.js container -->
        <div id="particles-js"></div>

        <!-- scripts -->
        <script src="assets/js/particles.js"></script>
        <script src="assets/js/app.js"></script>

    </body>
</html>

Now, I have a new problem: being set as an underlying layer, it catch no pointer-events. As soon as I will make it works, I'll update the answer.

Obviously, feel free to help if you have any suggestion.

UPDATE: Workaround for mouseEvents: Adding class mouseEvents to elements I need to focus (for example , navbar, etc.)

CSS

.body-particles{
  pointer-events: none;
}

.mouseEvents{
  pointer-events: all;
}

However, it would be nice if someone knows a better way to keep events both in front and back layer

Particles.js does not cover the entire page but instead it is inside the card component

The Form component is currently controlling the stacking context for its children (being positioned relatively), including Particles. In other words, Particles, which is absolutely positioned within Form, is constrained within Form's stacking context.

One solution is to make <Form /> and <Particles /> siblings in demo.js. For example:

<div>
  <Particles /> {/* Removes `Particles` from the `Form` stacking context entirely */}
  <Form />
</div>

And then define the zIndex, position, and backgroundColor for the StyledCard:

const StyledCard = styled((props) => <Card {...props} />)(({ theme }) => ({
  ...
  backgroundColor: "#fff", // Added -- You're going to have to define this based on the theme
  position: "relative" // Added so it can be "lifted"
  zIndex: "10", // Added to "lift" it above the particles
}));

There are better solutions for your problem, but this is the simplest fix because it requires the least refactoring.

Note: The card itself does not have a background color -- you'll either need to include another component that does, such as Paper, or add your own background color to it. I added white (#fff) as an example, but you'll probably want to pull this off the theme object if you go this route.

Working CodeSandbox: https://codesandbox.io/s/basiccard-material-demo-forked-6lyk8?file=/CardComponent.js

If you're interested in exploring how Stacking Contexts works, this demo that I created a few years ago might be helpful.

Particle JS - Covering the full page

#particles-js canvas (absolute) needs to be relative to the header.

header {
    position: relative;
    ...
}

ReactJS content not filing up the whole page and is only taking up 3/4 of the available height

How I managed to solve it

I added this to the index.html file:

#tsparticles{
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

How to put content over/on top of particle.js

use position: fixed
instead of absolute

and use z-index of interactive div to something higher than one

and lastly don't keep anything inside the div that shows the particles..

Sample Image
I know Its not much understandable as you are not using React.js
but the problem you are incurring would be solved with this.

so my <Particle/> component contains the particles.js file and all my other <div> and other content starts from <Navigation /> to <FaceRecognition />

if you can see i have used a class particles for my particles component. Here is its styling

  position: fixed;
  width: 100%;
  z-index: -1;
}

and all my other <div> have z-index of more than 1.
Here is the output

Sample Image