Replace site header with vanta.js background

Question

Yesterday i tried replacing header background with vanta.js background. It was preety hard for me, as a guy new to css, html and js. But soon enough i came up with this design:

<header id="header">
  <div class="header-content">
    my header content
  </div>
</header>

<script>
  VANTA.GLOBE({
    el: "#header",
    color: 0xff0000,
    backgroundColor: 0xffffff
  });
</script>

But this makes all header content disappear for some reason.

I tried making margin and z-order higher, also i replaced min-height with height but this made header stretch and header content being placed at the bottom