How to use a page as a background in React

Question

I have made a component from a 3D library react-particles-webgl. How can I make this as a background for my webpage. The webpage consists of form input elements.

import React from 'react';
import Input from './components/Input';
import Navbar from './components/Navbar';
import BackGround from './components/BackGround';

function App() {
  return (
    <div className="App">
      <BackGround />
       <div className="conatiner">
         <Navbar />
         <Input />
      </ div>
    </div>
  );
}

export default App;

In the code above BackGround is the component. Here I have attached the code of the background component.

import React from "react";
import ParticleField from "react-particles-webgl";

function BackGround() {
 
  const config = {
    showCube: false,
    dimension: "2D",
    velocity: 2.5,
    boundaryType: "bounce",
    antialias: true,
    direction: {
      xMin: -1,
      xMax: 1,
      yMin: -1,
      yMax: 1,
      zMin: -1,
      zMax: 1
    },
    lines: {
      colorMode: "solid",
      color: "#3FB568",
      transparency: 0.9,
      limitConnections: true,
      maxConnections: 20,
      minDistance: 60,
      visible: true
    },
    particles: {
      colorMode: "solid",
      color: "#3FB568",
      transparency: 0.9,
      shape: "circle",
      boundingBox: "canvas",
      count: 300,
      minSize: 20,
      maxSize: 50,
      visible: true
    },
    cameraControls: {
      enabled: false,
      enableDamping: true,
      dampingFactor: 0.2,
      enableZoom: true,
      autoRotate: false,
      autoRotateSpeed: 0.3,
      resetCameraFlag: true
    }
  };

  return (
    <div className="background">
      <ParticleField config={config} />
    </div>
  );
}

export default BackGround;

Css I have used for that component is-

.BackGround{
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

score 0 · Accepted Answer · answered Jul 11 '20 at 16:41

0

You don't need to wrap your app with the background component - render it before the other components, and use css to style the canvas to be a background. I'd guess at position absoluting it, then 100vw and 100vh to fill the screen. Finally set the z-index to keep it behind everything.

import React from 'react';
import Input from './components/Input';
import Navbar from './components/Navbar';
import BackGround from './components/BackGround';

function App() {
  return (
    <div className="App">
      <BackGround />
      <Navbar />
      <Input />
    </div>
  );
}

export default App;

answered Jul 11 '20 at 16:41

MattJHoughton

1,040
13
19

I have changed the file and also added some CSS to it. But it is just showing that that part above the Input part as like an Inline block element. – prinzu Jul 11 '20 at 18:22
Can you post the CSS and the BackGround component code? – MattJHoughton Jul 11 '20 at 20:53
@prinzu and the background component? – MattJHoughton Jul 12 '20 at 16:52
added that too. It's showing the BackGround component as an inline component even after the styles – prinzu Jul 12 '20 at 17:56
Your class names don't match for the html and css.
.BackGround{
– MattJHoughton Jul 12 '20 at 17:59
Yes, sorry for that. Thanks for the CSS help. – prinzu Jul 12 '20 at 18:12

How to use a page as a background in React

1 Answers1