search

wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.16k stars 106 forks source link

How to set this as the background of another element, instead of the whole screen? #125

Closed benslv closed 4 years ago

benslv commented 4 years ago

I'm trying to add this particle animation as the background of a <header> section on my site, but I can't work out the proper way to get it to display as the header's background - filling to 100% the height of the header - and then stopping.

matteobruni commented 4 years ago

Hi @silverben10

Does this sample helps?

https://codesandbox.io/s/laughing-pine-hdi1z?file=/src/App.js

MightyPhoenix commented 4 years ago

@matteobruni Thanks! This kind of worked for me. Took around 30mins to figure out the CSS.

EDIT : for Particles Styling position:fixed; worked for me to fill the whole background as absolute was only covering 100vh of the Doc

EDIT 2: Check my website for output: agnibesh.dev And the Github Repo for it : Github/MightyPhoenix/agnibesh.dev

benslv commented 4 years ago

That worked perfectly, thanks @matteobruni!