Can't remove position fixed from tsparticles-slim on next.js

[Decisive-Development]

Contact Details

No response

What do you need?

Hello, So I am using next.js, I am new to React in general, I had a particles library working on my html website, but now I am using particles.ts i am seemingly unable to style it. I have tried a few things to no avail.

I am calling the component inside the main of my homepage:

I had tried to add in options as i saw changing fullScreen can help, but it did not.

"use client";
import { useCallback } from "react";
import Particles from "react-particles";
import { loadSlim } from "tsparticles-slim";
const ParticlesComp = () => {
    const particlesInit = useCallback(async (engine) => {
        console.log(engine);
        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        //await loadFull(engine);
        await loadSlim(engine);
    }, []);
    const particlesLoaded = useCallback(async (container) => {
        await console.log(container);
    }, []);
    return (
        <Particles
            id="tsparticles"
            className="h-full w-full relative z-10"
            url="/particles.json"
            init={particlesInit}
            loaded={particlesLoaded}
            options={
                {
                    fullScreen: {
                        enable: true,
                        zIndex: -1
                    }
                }
            }
        />
    );
};

export default ParticlesComp;

I also tried some CSS but that didn't work either:

#tsparticles canvas {
    position: absolute !important;
    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 */
}

Finally I couldn't see anything in my .json file.

Any suggestions greatly appreciated! I want it to act similar to here: https://www.decisive-development.com/

However on my new website i want it to cover the whole background and move with the page, rather than being fixed when scrolling

tsParticles Version

unsure

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[matteobruni]

https://www.reddit.com/r/tsParticles/comments/w8luvb/why_my_particles_are_full_screen_i_want_them_to/