How to place particlejs on a Parallax banner with text in the center

Question

I wonder how I can put the effect Particlejs in a banner Parallax with a text in the center of the div. Thus:

For example, in this banner I wanted, in the center of it, there to be a text and the image to be in effect Paralax.

I tried that way:

var canvasDiv = document.getElementById('particle-canvas');
var options = {
  particleColor: '#fff',
  interactive: true,
  background: "assets/img/banner12.png",
  speed: 'medium',
  density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);

.bgimg-1, .bgimg-2, .bgimg-3 {
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

  }
  .bgimg-1 {
    background-image: url("../assets/img/banner12.png");
    min-height: 100%;
    height: 500px;
    width: 100%;
  }
  .business-header {
    display: block !important;
    height: 500px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  .text-center{
    text-align: center;
  }
  .lead{
    letter-spacing: 7px;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 64px;
    font-size: 16px;
  }
  .text-white {
    color: #fff;
  }
  #particle-canvas {
  width: 100%;
  height: 100%;
}

<header class="business-header">
  <div id="particle-canvas"></div>
  <div class="bgimg-1" style="display: block">
    <div class="container align-vertical">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <br><br><br><br><br><br><br><br><br><br>
          <h1 class="text-center text-white">Teste Titulo</h1>
          <p class="lead text-white">Teste paragrafo</p>
        </div>
      </div>
    </div>
  </div>
</header>