I want to set the background screen with react, but I can only set the background screen for the file upload part.

What you want to ask

How should I set the background screen to the entire surface and adjust the background screen according to the size of the web page?

Code

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import FileUpload from "./compornents/FileUpload";

function App () {
   return (
       <div className = "App">
         <FileUpload />
       </ div>
   );
}

export default App;

CodePudding user response：

If you pass the image as a URL then you can use background-size cover to fit into your div

{
  background-image: url("Yout Image URL");
  background-size: cover;
}

CodePudding user response：

create a file and name it style.css and reference the App div

.App {
    background-image: url("./assets/pic.jpg");
    background-repeat: no-repeat;
}

then import it to your app.js

import "./style.css";