Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
142
rated 0 times [  148] [ 6]  / answers: 1 / hits: 6485  / 5 Years ago, mon, march 11, 2019, 12:00:00

I am learning React and having some issues setting React-Particles-Js (https://www.npmjs.com/package/react-particles-js) to be the background of my website.



If I only render



  class App extends Component {
render() {
return (
<div>
<Particles />
</div>

);
}
}


I get the background just as I wish it to be. However, as soon as I render anything else (for example an h1 tag), it is not displayed on react-particles-js, so to say, but instead it moves react-particles-js and is displayed separately.



For example, if I render



 class App extends Component {
render() {
return (
<div>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<Particles />


</div>


);
}
}

export default App;


what happens is that Hello World is displayed three times in the top left hand corner of the screen and Particles is displayed below it, meaning that Particles is interpreted as just another element on the same layer as h1 (as if it was another h1 tag) rather than as a background element that underlies all elements--whether they are h1 tags, cards, or navs or anything else--which is what I'd like it to be!



This is my Particles.js



import React, { Component } from 'react';
import Particles from 'react-particles-js';

var style = {
width: 100vw,
height: 100vh,
};


class ParticlesBackground extends Component {

render() {
return (
<div style={style}>
<Particles
params={{
particles: {
number: {
value: 90
},
size: {
value: 2.5
}
},
interactivity: {
events: {
onhover: {
enable: true,
mode: repulse
}
}
}
}}/>
</div>
)
}
}

export default ParticlesBackground;


This is my App.js



import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Nav from './Nav'
import MainArea from './MainArea';
import Particles from './Particles';
import PeopleCard from './PeopleCard'





class App extends Component {
render() {
return (
<div>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<Particles />


</div>


);
}
}

export default App;


And this is what I see
enter image description here
As you can see, the particles and the tags seem to be interpreted as being mutually exclusive.



(PS, I set the body tag in my html.index to have the background color #e74c3c, which is the red-ish you see as the background)



Any advice on how I could fix this?


More From » html

 Answers
5

I use the same lib for particles, here is my canvas css that works just like you want:



#particle-canvas {
position:fixed !important;
left:0;
top:0;
width:100%;
height:100%;
}


It fixes element position and set it to top-left most of the screen, setting to 100% on both dimenions.


[#8510] Friday, March 8, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
terrellhunterm

Total Points: 82
Total Questions: 109
Total Answers: 98

Location: Vietnam
Member since Sun, Oct 18, 2020
4 Years ago
terrellhunterm questions
;