Search code examples
javascripthtmlcssbulmaparticles.js

How to add particles.js to Bulma hero background?

I got particles.js to load however it pushes the bulma hero up instead of replacing the hero background. Any solutions?

#particles-js{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom right, #ad5389, #3c1053);
}
<section class="hero is-fullheight" id="particles-js">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title has-text-light is-size-1">iOS application development</h1>
      <a class="button is-light is-inverted is-outlined">Learn More</a>
    </div>
  </div>
</section>

<script type="text/javascript" src="js/site.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>

Solution

  • I've used:

    #particles-js canvas{
  position: absolute;
  height: 100vh;
  z-index: -1;
}