I have been using React to create my own professional website. With this, I wanted a cool background in which I decided to use https://www.npmjs.com/package/react-particles-js

The only issue I have is that on mobile the particles do not fill the screen but instead seem to be stuck at the top of the screen. The easiest way to see this is to go to https://my-app-bwp36ovux.vercel.app/ and look at the site on your monitor then use the F12 debug console to change it to a mobile device. When doing so take note of the floating particles in the background.

I got this const I use to set values for the particles

const particalOpt = {
  particles:{
    number:{
      value: 150,
      density: {
        enable: true,
        value_area: 800
      }
    },
    line_linked:{
      distance: 100,
      opacity: .2,
      width: 2,
    },
    move:{
      speed: 1,
      bounce: true,
    }
  }
}

I call it by simply using

<div className="background">
            <Particles 
            params = {particalOpt}
            />
          </div>

I can not seem to put my finger on why using the background attribute these particles do not fill mobile devices.

For the full code go to https://github.com/13Smat/MySite

Thank you in advance.

Issue

The background div has 100vw and 100vh, but the canvas has its own width and height with an override to 100% each. The problem is that the div rendering the canvas has no absolute dimensions for the canvas to inherit from or be relative to.

DOM

<div class="background">
  <div id="tsparticles"> // <-- no height/width for canvas to be % of
    <canvas
      class="tsparticles-canvas-el"
      width="558"
      height="281"
      style="width: 100%; height: 100%;" // <-- applied style
    ></canvas>
  </div>
</div>

The canvas element's applied style:

element.style {
    width: 100%;
    height: 100%;
}

Solution

Provide a width and height to the #tsparticles div. Add the following CSS to your App.css file.

#tsparticles {
  width: 100%;
  height: 100%;
}