使粒子成为我的背景登录页面

Question

在尝试使标题保持居中状态时，我无法在目标网页上设置背景的粒子。我能够成功地完全实现粒子，但似乎canvas类将我的标题推到了页面顶部。请告知：

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

h3 {
  padding-top: 30px;
  text-align: center;
}

h3:hover {
  color: black;
}

h6 {
  text-align: center;
  text-decoration: underline;
}

h6 a {
  color: black;
}

body,
html {
  height: 100%;
}

#fullnav {
  position: absolute;
  top: 0;
  width: 100%;
}

.fa-linkedin-in {
  font-size: 1.8em;
}

ul li a {
  font-size: 1.4em;
  font-weight: bold;
}

#jumbotron {
  background-image: url(images/landing.jpg);
  height: 100vh; // vh stands for viewpoint height
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nameContainer {
  text-align: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-decoration: underline;
  text-shadow: 6px 2px 1px rgba(150, 150, 150, 1);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- Jumbotron Banner  -->

<div id="jumbotron">

  <!-- Navbar -->

  <nav class="navbar navbar-expand-lg navbar-dark" id="fullnav">
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="images/Resume.pdf" target="_blank">Resume</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>


    <a href="https://www.linkedin.com/in/quang-phong-07742a139/" target="_blank">
      <i class="fab fa-linkedin-in"></i>
    </a>
  </nav>

  <div class="nameContainer">
    <h1> Hello! Welcome to Quang Phong's Portfolio </h1>
  </div>
</div>

我已经发布了CSS和html的代码。谢谢。