css - Move vue-particles component to the back and use it as the background

Question

I want the Vue-Particles component to be at the back, but somehow I cannot make this to work. All my components and HTML tags are behind the particles.

What I've tried is to fix it using the z-index CSS property.

Using z-index: 0 on the particle-js component:

h1 {
  z-index: 999;
}

#particles-js { 
  position: absolute;
  background-size: cover;
  top: 0; 
  bottom: 0; 
  left: 0;
  right: 0; 
  overflow-y: hidden; 
  z-index: 0;
}

Shows like this:

Using z-index: -1 on the particle-js component moves the component to the bottom, not to the background like I want. See the new problem here:

EDIT: All my code is here, I am using Bootstrap-vue also:

<template>
  <div id="app">
    <Navbar />
    <vue-particles color="#e60000"></vue-particles>
    <h1>Hola</h1>
  </div>
</template>

<script>
import Navbar from '../../components/Navbar.vue'

export default {
  name: 'app',
  components: {
    Navbar
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}

h1 {
  z-index: 999;
}

#particles-js { 
  /*position: absolute;
  background-size: cover;
  top: 0; 
  bottom: 0; 
  left: 0;
  right: 0; 
  overflow-y: hidden; 
  z-index: 0;*/
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; 
}


</style>

The effect I want is something like this, where the lines don't cover anything of the title:

Answer 1

I was able to overlap text divs and vue-particle by setting the the text div position as absolute and specifying vertical and horizontal positioning. For example, to place something in the middle of the screen on top of the particles:

html:

<vue-particles color="#dedede"></vue-particles>
<div class="centered-text">
  <p> Hello World </p>
</div>

css:

#particles-js {
  height: 100vh;
}

.centered-text {
  color: #ffffff;
  position: absolute;
  text-align: center;
  top: 40%;
  width: 100%;
}