I am learning React and having some issues setting 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?

I am learning React and having some issues setting React-Particles-Js (https://www.npmjs./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?

• javascript
• html
• css
• reactjs
• particles.js

2 Answers 2

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.

hope this will help you

import Particles from 'react-particles-js';
  class App extends Component {
  render() {
    return (
      <div className="App">

         <Particles className="particles"
         params={particlesOptions}/>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        >
        <Header Data={Data}/>
      </div>
      </div>
    );
  }
}

export default App;