How to make tsParticles full width and height of a container and not the whole page?

I have been struggling trying to get particles.js to be the background of a given element. That library seems to position the canvas weirdly and it always makes the canvas wider and longer than the element, and hacking around with top and left doesn’t really work well either. As far as I can tell it assumes you only ever want the whole page background to be it’s canvas. so I decided to look into tsParticles.

Does tsParticles properly support working with an arbitrary element and it’s width and height, e.g. it would use these values to create the canvas correctly? If the div is 100px wide and 100px in height, the canvas would be 100px wide and 100px in height.

For example, I have a div in the center. I’d like tsParticles to render only inside the div and underneath the text:

Would it be possible to get an example of this?

[matteobruni]

Hi @lloydjatkinson,

Yes, this configuration is possible. You can see that working in these samples

https://codepen.io/matteobruni/pen/XWjLOpQ

https://codepen.io/matteobruni/pen/QWKXPRq

I try to explain how to achieve it.

tsParticles.load('your-div-id', { /* your configuration */ }); // or loadJSON if you are using an external JSON file

Don’t enable backgroundMode options or use any kind of fixed CSS on that div.

The best result will be achieved using a container for particles and your content like this:

<div id="container">
    <div id="tsparticles"></div>
    <div id="your-div"></div>
</div>

#container {
    position: relative
}

#tsparticles {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 0; /* if you use -1 you have to set to `"window"` the interactivity.detectsOn property */
}

#your-div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

Hope it helps, if you need more help don’t hesitate to ask

[matteobruni]

Thank you for the reply @matteobruni . Still trying but cant seem to work, guess i need to learn more 😉

i am using react. and currently created an

config file

const particlesConfig = {particles: {
  options:{fullscreen:{enable:false,zIndex:0}},
  color: {
    value: "#ff0000",
    animation: {
      enable: true,
      speed: 20,
      sync: true
    }
  },
  lineLinked: {
    blink: false,
    color: "random",
    consent: false,
    distance: 30,
    enable: true,
    opacity: 0.3,
    width: 0.5
  },
  move: {
    attract: {
      enable: false,
      rotate: {
        x: 600,
        y: 1200
      }
    },
    bounce: false,
    direction: "none",
    enable: true,
    outMode: "bounce",
    random: true,
    speed: 0.5,
    straight: false
  },
  number: {
    density: {
      enable: false,
      area: 2000
    },
    limit: 0,
    value: 200
  },
  opacity: {
    animation: {
      enable: true,
      minimumValue: 0.05,
      speed: 2,
      sync: false
    },
    random: false,
    value: 1
  },
  shape: {
    type: "circle"
  },
  size: {
    animation: {
      enable: false,
      minimumValue: 0.1,
      speed: 40,
      sync: false
    },
    random: true,
    value: 1
  }
},
polygon: {
  draw: {
    enable: true,
    lineColor: "rgba(255,255,255,0.2)",
    lineWidth: 0.3
  },
  move: {
    radius: 10
  },
  inlineArrangement: "equidistant",
  scale: 0.5,
  type: "inline",
  url: "https://particles.js.org/images/smalldeer.svg"
}
};
    ;

export default particlesConfig

and then a background file

import React from "react";
import Particles from "react-tsparticles";
import particlesConfig from "./config/Particle-config";

export default function ParticleBackground(){
    return(

       <div>
        
        <Particles  params={particlesConfig}></Particles>
        </div>
    );
}

I now want the particles to be displayed in a column , on a spesific part of the page.

now it is displaying in the middle on all pages.

Thanks for all the help anyways, i will keep trying! 😃

The configuration object has an issue for fullScreen options.

const particlesConfig = {
  fullScreen: { enable: false, zIndex: 0 },
  particles: {
    color: {
      value: "#ff0000",
      animation: {
        enable: true,
        speed: 20,
        sync: true,
      },
    },
    lineLinked: {
      blink: false,
      color: "random",
      consent: false,
      distance: 30,
      enable: true,
      opacity: 0.3,
      width: 0.5,
    },
    move: {
      attract: {
        enable: false,
        rotate: {
          x: 600,
          y: 1200,
        },
      },
      bounce: false,
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: true,
      speed: 0.5,
      straight: false,
    },
    number: {
      density: {
        enable: false,
        area: 2000,
      },
      limit: 0,
      value: 200,
    },
    opacity: {
      animation: {
        enable: true,
        minimumValue: 0.05,
        speed: 2,
        sync: false,
      },
      random: false,
      value: 1,
    },
    shape: {
      type: "circle",
    },
    size: {
      animation: {
        enable: false,
        minimumValue: 0.1,
        speed: 40,
        sync: false,
      },
      random: true,
      value: 1,
    },
  },
  polygon: {
    draw: {
      enable: true,
      lineColor: "rgba(255,255,255,0.2)",
      lineWidth: 0.3,
    },
    move: {
      radius: 10,
    },
    inlineArrangement: "equidistant",
    scale: 0.5,
    type: "inline",
    url: "https://particles.js.org/images/smalldeer.svg",
  },
};

I’ve fixed the fullScreen issues, I didn’t change anything in other options.