cant get background image on full screen size in reactjs-CodePudding

I can't seem to get a background image to full-screen size from my App.js in react.js.

my code

<div style={{ backgroundImage: `url(${Image})` }} className="App">routes</div>

I have set my index.css to this:

body, html {
    height: 100%;
    margin: 0;
}

Still, the same outcome.

CodePudding user response：

Set background-image for the <body> or set the parent div height to 100vh and set background to it. This way you can achieve your requirement.

html, body {height: 100%; margin: 0; }

.formParent {display: flex; width: 100%; align-items:center; justify-content: center; height: 100vh; background: url('https://picsum.photos/seed/picsum/200/300') no-repeat fixed; background-size:cover; }
form {background: #fff; border-radius: 10px; max-width:50%; padding: 30px;}
form div {display: block;}

<html>
  <body>
    <div class="formParent">
      <form>
        <div>
          <label>Name</label>
          <input type="text">
        </div>
      </form>
    </div>
  </body>
</html>

CodePudding user response：

the background image is not on the body ... it is on the div

you can use the Style background property on the body element using

document.body.style.backgroundImage = "url('img_tree.png')";

so use the useEffect function to add the image style on component mount

useEffect(() => {
   document.body.style.backgroundImage = `url(${Image})`
   return () => {
    document.body.style.backgroundImage = ''
   }
},[])

or you could just use css to add the image tothe body