How to place elements on a Particle JS background in Vue JS 3

I am using the vue 3 particles js library in my vue3 project and so far it has been working but I am having issues displaying elements over it as I noticed it hides the elements inside it. I wish to achieve something like this How can I be able to place this NASA image over the particles. Already checked the example in the docs but it uses vanilla JS and I am not sure of how to implement in vue.

You have two options:

If you want the particles full screen you can enable the full screen options with a lower z index like this:

{
   "fullScreen": {
      "enable": true,
      "zIndex": -1 // -1 is behind the body, so if you have a background you have to use 0 or a different value
   }
}

Or you can set a custom CSS targeting the particles id (eg. tsparticles) setting manually a lower z-index.

If particles are behind elements they won't interact when mouse is hover another element so I recommend setting interactivity.detectsOn to "window" value.

Setting this value makes particles unresponsive to mouse events directly since they are fired from the window itself so you can have particles on top and having the website still usable.

You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY