Particle JS show stars only inside one div

Question

I want to display particles only inside or as part of 1 div. I did come across many different solutions but I can't seem to get any to work on my React app.

Here is a sample code that I created - https://codesandbox.io/s/particles-inside-1-div-9vhqgi?file=/src/Stars.js

Could someone please help me alter the styles to show the particles as part of the background in the middle div

Answer 1

I used the workaround which was to give a ref to a div parent from the canvas container, then refer to the canvas element in the DOM and set it's style to absolute

Working solution is in the codesandbox in the question.

// outer div ref -> element parent div -> canvas style
myRef.current.children[0].children[0].style.setProperty(
  "position",
  "absolute",
  "important"
);

Answer 2

// stars-config.json

In your particle Json, under the color part, add the "fullScreen" and the "style" (The "zIndex":"-1" is optional)

"color": {
  "value": "#fcf6f4"
},
"fullScreen": {
  "enable": "false",
  "zIndex": "-1"
},
"style": {
  "position": "absolute",
  "height" : "100%",
  "top": "0",
  "left":"0"
},