3

I am using particle.js as a background. I have managed to place on the background with use of z-index. I tried a suggestion on the github isseus page. The z-index and this:

"interactivity": {
    "detect_on": "canvas",

This bit was already added in the default particle configuration.

The problem is similar as: this question. He said he solved it but looking at his codepen link it doesnt seem the same. There is no content above the the particles.

Mine current build: Github PROBLEM = the interactivity works just above the first content box and just below it. I have tried multiple edits with the width of elements and z-index. Also tried using a extra div for the other content.

How can I get the interactivity to work on the sides?

Kalamarico
  • 5,466
  • 22
  • 53
  • 70
Elrond
  • 31
  • 1
  • 3

2 Answers2

13

Try this in your html

<div id="particles-js" style="position:fixed;width:100%;z-index:-10;"></div>

Also if you want interactive controls while particles are in the background

set interactivity to window instead of canvas in particles.json file

"interactivity": {
"detect_on": "window",
Atish Shakya
  • 551
  • 6
  • 14
1

I exported from this codepen initially

And then I changed his css:

canvas {
width: 100%;
height:100%;
}

h1{
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 2rem;
padding-top: 20rem;
font-weight: 200;
z-index: 2;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-colour: #000000;
z-index: -1 !important; 
}

In the html:

<body>
<div id="particles-js"></div>
<h1> My text for my overlay title </h1>

In the index.js around line 73 of the export change the "detect_on" part from canvas to window regarding interactivity:

"detect_on": "window",

working example of above

There is another codepen set and working demo solving the same issue here other working code example but you get to see less of the other options to edit where I changed dots to stars etc.

edindubai
  • 151
  • 1
  • 8