Implementing Live Background

I'm trying to implement this live background into my webpage but right now only part of it shows up in like the top side of the page and it messes up with the rest of the divs. For my HTML I have all my body contents inside one big div and the first part of the div is the html for the live background. I'm trying to have it so it's displayed throughout the body but with a z index of -1. I'm not sure how to adjust the css for that, I can fix the other elements getting messed up but I want the background to be throughout the body.

HTML

<div class="vertical-centered-box">
  <div class="content">
    <div class="loader-circle"></div>
    <div class="loader-line-mask">
      <div class="loader-line"></div>
    </div>
    <svg width="36px" height="24px" viewBox="0 0 36 24" version="1.1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

CSS

#particle{ width: 100%; height: 100%; z-index: -1; }