how to force change the canvas style css it generate

[CCasusensa]

hi, i'm new i want modify
the canves it generate what can i do

this code
I tried a lot but still can't remove the immutable ones

<script lang="ts">
    import { onMount } from 'svelte';
    import { loadSlim } from 'tsparticles-slim';

    let ParticlesComponent;

    onMount(async () => {
        const module = await import('svelte-particles');

        ParticlesComponent = module.default;
    });

    let particlesConfig = {
        particles: {
            color: {
                value: '#ffffff'
            },
            move: {
                enable: true,
                direction: 'top',
                speed: 0.5
            },
            number: {
                value: 300
            },
            opacity: {
                value: 1,
                random: true,
                anim: {
                    enable: true,
                    speed: 1.0,
                    opacity_min: 0,
                    sync: false
                }
            },
            interactivity: {
                events: {
                    onHover: {
                        enable: false
                    }
                }
            }
        }
    };

    let onParticlesLoaded = (event) => {
        const particlesContainer = event.detail.particles;
    };

    let particlesInit = async (engine) => {
        await loadSlim(engine);
    };
</script>

    <svelte:component
    this={ParticlesComponent}
    id="tsparticles"
    class="w-full h-full"
    style=""
    options={particlesConfig}
    on:particlesLoaded={onParticlesLoaded}
    {particlesInit}/>

[matteobruni]

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

[CCasusensa]

thanks for reply
I tried this method and it still didn't work

[CCasusensa]

QQ2024212-161926.mp4

like in the video the particle effects are still rolling along with my screen
instead of the top image I pinned

[matteobruni]

I don't see that method applied to your code.

[CCasusensa]

sorry code is here

<script lang="ts">
	import { APP_NAME } from '$lib/config/constants';
	import { onMount } from 'svelte';
	import { loadSlim } from 'tsparticles-slim';

	let ParticlesComponent: any;

	onMount(async () => {
		const module = await import('svelte-particles');

		ParticlesComponent = module.default;
	});

	let particlesConfig = {
		particles: {
			color: {
				value: '#ffffff'
			},
			shape: {
				type: 'circle'
			},
			move: {
				enable: true,
				direction: 'top',
				speed: 0.5
			},
			number: {
				value: 250
			},
			opacity: {
				value: 0.6,
				random: true,
				anim: {
					enable: true,
					speed: 1.0,
					opacity_min: 0.2,
					sync: false
				}
			},
			fullScreen: {
				enable: false
			},
			size: {
				value: 3
			}
		}
	};

	let onParticlesLoaded = (event) => {
		const particlesContainer = event.detail.particles;
	};

	let particlesInit = async (engine) => {
		await loadSlim(engine);
	};
</script>

<svelte:head>
	<title>{APP_NAME}</title>
	<meta name="description" content="Test" />
</svelte:head>

<section class="w-full h-screen bg-white bg-[url('/assets/images/headers2.webp')] bg-top bg-contain xl:bg-cover bg-no-repeat flex items-end relative">
    <div class="w-full absolute h-2/3 top-0 overflow-hidden">
        <div class="w-full absolute">
			<svelte:component
			this={ParticlesComponent}
			id="tsparticles"
			class="w-full h-full"
			style=""
			options={particlesConfig}
			on:particlesLoaded={onParticlesLoaded}
			{particlesInit}/>
        </div>
        <div class="container max-w-7xl h-full flex flex-col gap-4 relative justify-start items-start pt-16">
            <div class="w-full flex items-center justify-center justify-self-center">
                <img src="/assets/images/logo.webp" alt="" class="animate-logo " />
            </div>
            <div class="text-4xl text-white font-bold italic">TEST</div>
            <div class="grid grid-cols-4 lg:grid-cols-2 gap-3"></div>
        </div>
    </div>
</section>
<section class="w-full h-60 bg-[url('/assets/images/header_decor.webp')] bg-[0_-6rem] bg-cover bg-no-repeat"></section>
<section class="w-full h-60 bg-[url('/assets/images/header_decor_2.webp')] bg-[0_3rem] bg-cover bg-no-repeat"></section>


<style>
	.animate-logo {
		animation: char1 3s ease-in-out infinite;
	}
</style>

[matteobruni]

The method described in the link is not there. Please read it carefully.

[CCasusensa]

solved