Why does my React site resize incorrectly? - reactjs

Question

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.

Answer 1

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%;
}

Answer 2

please take a look at #Drew Reese's comment and edit your question.
In the meantime I can provide a helpful example
The attributes that will help you most here are background-size, background-position. You can also look at other background properties that might help.
Side note: React does not particularly change how styling works, I would recommend playing around with CSS - it's the best way to learn

Answer 3

If you want particles to be set like a full screen background I would recommend the backgroundMode option, you can read more here
You can set that options like this:
{
backgroundMode: {
enable: true,
zIndex: 0
}
}
If you set the zIndex property to a negative value remember to change the detectsOn property to ”window” if you need mouse interactions