[Vuejs]-How to set a vue component to the background

If you want it to be running but not displayed expect when booleanToShow is true:

<div v-show="booleanToShow"></div>

If you want to remove it from the DOM (and stop it from running)

<div v-if="booleanToToggle"></div>

You can set tsparticles to be in background using the backgroundMode property.

You can see a working sample here: https://codesandbox.io/s/xenodochial-colden-uvs85?file=/src/App.vue

The property backgroundMode sets the tsparticles canvas to full screen, it’s an object with two properties: enable and zIndex.

• enable (boolean): (obviously) enables the full screen mode
• zIndex (number): sets the canvas element z-index property to whatever you want

A sample of backgroundMode:

{
    /* root object */
    backgroundMode: {
        enable: true,
        zIndex: -1
    }
    /* root object */
}

You can set the background property too, it’s a shorthand to the CSS background property.

You can use that property to change the canvas background color, for example:

{
    /* root object */
    background: {
        color: "#000"
    }
    /* root object */
}

If you set a negative zIndex you need to use detectsOn: "window" in interactivity object to keep mouse events working.