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

lloydjatkinson · 2021-01-31T18:11:20Z

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?

The text was updated successfully, but these errors were encountered:

xscode-auto-reply · 2021-01-31T18:11:21Z

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

matteobruni · 2021-01-31T18:55:59Z

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

hartmutobendorf · 2021-06-22T11:30:56Z

Thank you, brilliant tip!

jwandekoken · 2021-11-06T09:01:53Z

How to achieve that with "react-tsparticles"?

matteobruni · 2021-11-06T09:22:48Z

How to achieve that with "react-tsparticles"?

Starting from 1.37.0 the fullScreen option is enabled by default, you can disable it and follow the instructions described above

SuperWoll · 2022-01-10T13:55:33Z

Is it possible to eloborate a little more on how to get particles only to work on a spesific seciton of the page? i am using react-tsparticles. Been stuck for 2 days now, trying to figure it out...

matteobruni · 2022-01-10T14:11:41Z

Is it possible to eloborate a little more on how to get particles only to work on a spesific seciton of the page? i am using react-tsparticles. Been stuck for 2 days now, trying to figure it out...

I've created a sample to show just the differences here: https://codepen.io/matteobruni/pen/BawqaxW

I'll explain below more in details:

Full Screen

It's the standard behavior, if you load a standard tsParticles config without specifying any fullScreen options they are going to be the website background with fixed position and z-index: 0.

HTML

<div id="tsparticles-full"></div>

CSS

/* No custom CSS needed */

JavaScript

tsParticles.load("tsparticles-full", { /* options here */ });

Custom Positioning

This is achieved disabling the fullScreen options, you must handle the positioning yourself.

HTML

<div id="tsparticles-custom"></div>

CSS

/* this creates a 200x200 pixels square in the middle of the page containing the particles, you need to create your own CSS to position the particles where you need them */
#tsparticles-custom {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
  z-index: 10;
}

JavaScript

tsParticles.load("tsparticles-custom", {
  fullScreen: {
    enable: false
  },
  /* all other options */
});

SuperWoll · 2022-01-12T11:16:41Z

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! :)

matteobruni · 2022-01-12T11:22:42Z

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.

joshodea95 · 2022-03-14T09:48:29Z

Hi @SuperWoll
Did you end up getting this working? I am experiencing the same problem and can't seem to find anything to fix it.

pawKer · 2022-04-06T22:39:40Z

I've managed to set the particles as the background of a container div using react-tsparticles like in the example below.

In my React component:

...
<div className={"container-style"}>
  <Particles options={particlesConfig} />
</div>
...

In the CSS:

.container-style {
  height: 100vh; //  In my case I wanted the div to cover the whole viewport.
}

#tsparticles {   // This is the id of the div created by the Particles component
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
}

Also in particlesConfig:

...
fullScreen: {
    enable: false,
    zIndex: 0,
  }
...

JuliaBonita · 2022-04-26T00:10:24Z

I'm using SvelteKit. I tried to adapt these suggestions to SvelteKit, but none of these solutions work to display the particles only within a smaller div. No matter what I do in my project files, something overrides all my styles and the canvas gets auto-populated with these fullscreen properties:

<canvas data-generated="true" style="width: 100% !important; height: 100% !important; position: fixed !important; z-index: 0 !important; top: 0px !important; left: 0px !important; pointer-events: none;" width="2386" height="1961"></canvas>

I've already looked at the old demos . . .
https://codepen.io/matteobruni/pen/BawqaxW
https://codepen.io/matteobruni/pen/XWjLOpQ
https://codepen.io/matteobruni/pen/QWKXPRq

. . . but they are based on a very old version and they seem to work a bit differently than the 2.x versions and they don't work with SvelteKit's dynamic import requirement. For example, maybe the way that Svelte's dynamic import works requires a different approach to apply the styles?

I'm not sure if this is really a bug or my ignorance, but the previous issue I was facing required the dynamic import requirement; so I'm not sure if that is impacting this issue, too. For reference, below is the dynamic component logic from my temp project:

<svelte:component
      this={ParticlesComponent}
      id="tsparticles-custom"
      options={particlesConfig}
      on:particlesLoaded={onParticlesLoaded}
      {particlesInit}
    />

When I put that component inside the divs that are suggested in this thread, it has no affect and the particles still display fullscreen.

@matteobruni , I'm sorry to bother you again, but can you please use the temp project that I sent you last night from the other issue and tell me what is preventing me from displaying the particles in a smaller div? If you have a quick example that works in SvelteKit, I would appreciate it.

matteobruni · 2022-04-26T05:24:33Z

I'm using SvelteKit. I tried to adapt these suggestions to SvelteKit, but none of these solutions work to display the particles only within a smaller div. No matter what I do in my project files, something overrides all my styles and the canvas gets auto-populated with these fullscreen properties:
<canvas data-generated="true" style="width: 100% !important; height: 100% !important; position: fixed !important; z-index: 0 !important; top: 0px !important; left: 0px !important; pointer-events: none;" width="2386" height="1961"></canvas>
I've already looked at the old demos . . . https://codepen.io/matteobruni/pen/BawqaxW https://codepen.io/matteobruni/pen/XWjLOpQ https://codepen.io/matteobruni/pen/QWKXPRq

. . . but they are based on a very old version and they seem to work a bit differently than the 2.x versions and they don't work with SvelteKit's dynamic import requirement. For example, maybe the way that Svelte's dynamic import works requires a different approach to apply the styles?

I'm not sure if this is really a bug or my ignorance, but the previous issue I was facing required the dynamic import requirement; so I'm not sure if that is impacting this issue, too. For reference, below is the dynamic component logic from my temp project:
<svelte:component
      this={ParticlesComponent}
      id="tsparticles-custom"
      options={particlesConfig}
      on:particlesLoaded={onParticlesLoaded}
      {particlesInit}
    />
When I put that component inside the divs that are suggested in this thread, it has no affect and the particles still display fullscreen.

@matteobruni , I'm sorry to bother you again, but can you please use the temp project that I sent you last night from the other issue and tell me what is preventing me from displaying the particles in a smaller div? If you have a quick example that works in SvelteKit, I would appreciate it.

Change the particles.json options like this:

{
/* other options */,
  "fullScreen": {
    "zIndex": 0,
    "enable": false // this is the line to change
  },
/* other options */,
}

This will make particles container be a normal div, without any forced style to be full page size

JuliaBonita · 2022-04-26T06:21:00Z

Aah, yes, that works. Thank you!

Itzadetunji · 2022-04-28T04:48:49Z

Please can someone help me my particles is not going to the background
<Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={{ fullScreen: { enable: true, zIndex: 0 }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "grab", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { grab: { distance: 85.26326046708033, line_linked: { opacity: 0.4442177654201152 } }, bubble: { distance: 250, size: 0, duration: 2, opacity: 0, }, repulse: { distance: 64.96248416539453, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 20, enable: true, opacity: 1, width: 1, }, collisions: { enable: false, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 1.5, straight: false, }, number: { density: { enable: true, area: 800, }, value: 500, }, opacity: { value: 0.1, random: true, anim: { enable: true, speed: 1, opacity_min: 0, sync: false } }, shape: { type: "circle", stroke: { width: 0, color: "#000000", } }, size: { value: 1, random: true, anim: { enable: false, speed: 1, size_min: 0.3, sync: false } }, }, detectRetina: true, }} />

matteobruni · 2022-04-28T06:03:29Z

Please can someone help me my particles is not going to the background
<Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={{ fullScreen: { enable: true, zIndex: 0 }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "grab", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { grab: { distance: 85.26326046708033, line_linked: { opacity: 0.4442177654201152 } }, bubble: { distance: 250, size: 0, duration: 2, opacity: 0, }, repulse: { distance: 64.96248416539453, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 20, enable: true, opacity: 1, width: 1, }, collisions: { enable: false, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 1.5, straight: false, }, number: { density: { enable: true, area: 800, }, value: 500, }, opacity: { value: 0.1, random: true, anim: { enable: true, speed: 1, opacity_min: 0, sync: false } }, shape: { type: "circle", stroke: { width: 0, color: "#000000", } }, size: { value: 1, random: true, anim: { enable: false, speed: 1, size_min: 0.3, sync: false } }, }, detectRetina: true, }} />

Could be the zIndex at 0, try with -1

Itzadetunji · 2022-04-28T10:22:25Z

It does not

Please can someone help me my particles is not going to the background
<Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={{ fullScreen: { enable: true, zIndex: 0 }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "grab", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { grab: { distance: 85.26326046708033, line_linked: { opacity: 0.4442177654201152 } }, bubble: { distance: 250, size: 0, duration: 2, opacity: 0, }, repulse: { distance: 64.96248416539453, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 20, enable: true, opacity: 1, width: 1, }, collisions: { enable: false, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 1.5, straight: false, }, number: { density: { enable: true, area: 800, }, value: 500, }, opacity: { value: 0.1, random: true, anim: { enable: true, speed: 1, opacity_min: 0, sync: false } }, shape: { type: "circle", stroke: { width: 0, color: "#000000", } }, size: { value: 1, random: true, anim: { enable: false, speed: 1, size_min: 0.3, sync: false } }, }, detectRetina: true, }} />

Could be the zIndex at 0, try with -1

It does not still work
I need it to go to the background of my page without covering other pages

matteobruni · 2022-04-28T10:29:39Z

It does not

Please can someone help me my particles is not going to the background
<Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={{ fullScreen: { enable: true, zIndex: 0 }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "grab", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { grab: { distance: 85.26326046708033, line_linked: { opacity: 0.4442177654201152 } }, bubble: { distance: 250, size: 0, duration: 2, opacity: 0, }, repulse: { distance: 64.96248416539453, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 20, enable: true, opacity: 1, width: 1, }, collisions: { enable: false, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 1.5, straight: false, }, number: { density: { enable: true, area: 800, }, value: 500, }, opacity: { value: 0.1, random: true, anim: { enable: true, speed: 1, opacity_min: 0, sync: false } }, shape: { type: "circle", stroke: { width: 0, color: "#000000", } }, size: { value: 1, random: true, anim: { enable: false, speed: 1, size_min: 0.3, sync: false } }, }, detectRetina: true, }} />

Could be the zIndex at 0, try with -1

It does not still work I need it to go to the background of my page without covering other pages

Open a new issue, giving me more details about your issue. I don't understand what do you mean with other pages.

matteobruni added the question Further information is requested label Jan 31, 2021

matteobruni closed this as completed Feb 10, 2021

tsparticles locked and limited conversation to collaborators Apr 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lloydjatkinson commented Jan 31, 2021 •

edited

xscode-auto-reply bot commented Jan 31, 2021

matteobruni commented Jan 31, 2021

hartmutobendorf commented Jun 22, 2021

jwandekoken commented Nov 6, 2021

matteobruni commented Nov 6, 2021

SuperWoll commented Jan 10, 2022

matteobruni commented Jan 10, 2022 •

edited

SuperWoll commented Jan 12, 2022 •

edited

matteobruni commented Jan 12, 2022

joshodea95 commented Mar 14, 2022

pawKer commented Apr 6, 2022

JuliaBonita commented Apr 26, 2022 •

edited

matteobruni commented Apr 26, 2022

JuliaBonita commented Apr 26, 2022

Itzadetunji commented Apr 28, 2022 •

edited

matteobruni commented Apr 28, 2022

Itzadetunji commented Apr 28, 2022

matteobruni commented Apr 28, 2022

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

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

Comments

lloydjatkinson commented Jan 31, 2021 • edited

xscode-auto-reply bot commented Jan 31, 2021

matteobruni commented Jan 31, 2021

hartmutobendorf commented Jun 22, 2021

jwandekoken commented Nov 6, 2021

matteobruni commented Nov 6, 2021

SuperWoll commented Jan 10, 2022

matteobruni commented Jan 10, 2022 • edited

SuperWoll commented Jan 12, 2022 • edited

matteobruni commented Jan 12, 2022

joshodea95 commented Mar 14, 2022

pawKer commented Apr 6, 2022

JuliaBonita commented Apr 26, 2022 • edited

matteobruni commented Apr 26, 2022

JuliaBonita commented Apr 26, 2022

Itzadetunji commented Apr 28, 2022 • edited

matteobruni commented Apr 28, 2022

Itzadetunji commented Apr 28, 2022

matteobruni commented Apr 28, 2022

lloydjatkinson commented Jan 31, 2021 •

edited

matteobruni commented Jan 10, 2022 •

edited

SuperWoll commented Jan 12, 2022 •

edited

JuliaBonita commented Apr 26, 2022 •

edited

Itzadetunji commented Apr 28, 2022 •

edited