React-particles-bg, stretch to fit whole page?

Hello everyone I am almost finished with my project and I have encountered my last issue, however it has bested me so far.
I am using react particle-bg as the background to my page, the only problem is the particles end so abruptly after the first component. I have tried all the css rules I can think of to stretch it out but it never moves.

<ParticlesBg type="custom" className="bubbles" config={config} bg={true} />

this is what my app.js looks like,

.bubbles {
   position: fixed;
   height: 1000%;
}

And this is what my Css file looks like.
You can view my full code here

Thanks in advance for your advice.

Just in case someone is confused about the layout like I first was, App.css is empty, the css is stored under Public>css>layout.css
I built this on top of a portfolio template due to all the issues I was having with building one myself.

After rigorous googling, I found a solution.
Wrap the whole particles in a div, then add a classname to said div.
Then add this CSS

.bubbles {

   width: 100%;

  height: 100%;

  position: fixed;

  

  background-image: url('');

  background-size: cover;

  background-position: 50% 50%;

  background-repeat: no-repeat;

  z-index: 2;

 }

I hope this helps anyone who might find this in the future