How to use background images on react as sections-CodePudding

I'm new to react and I'm confused how can I set the background image on a each page section here is my app.js. I have 4 images and i want to use them as a backgrounds for each section, but it's not working is just show up one image. I don't know if possible to make a website with only images on background of each section.

This is my code App.js.

import NavBar from "./NavBar";
import "./App.css";

function App() {
  return (
    
      <div className="App">
      <NavBar/>
      <section className="Home-1">
      <div className="Home"></div>
      </section>
      <section className="Page-2">
      <div className="Page"></div>
      </section>
      <section className="Page-3">
      <div className="Page"></div>
      </section>
      <section className="page-4">
      <div className="Page"></div>
      </section>
      </div>
     
  );
}

export default App;



.App {
  text-align: center;
  font-family: "Press Start 2P", "VT323";
  color: white;
}

.body {
  overflow: auto;
  background-color: black;
}

.overlay {

  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;

}

.Home-1 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Home.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-2 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Page2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-3 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Page3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-4 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Page4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

CodePudding user response：

When you use position: absolute the section will be overlap with each other.

try this:

.Home-1 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: red;
}

.Page-2 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-3 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: green;
}

.Page-4 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: yellow;
}

CodePudding user response：

It's working with this config but how to make the images responsive.

.Home-1 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Home.png");
}

.Page-2 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Page2.png");
}

.Page-3 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Page3.png");
}

.Page-4 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Page4.png");
}