title: React Adding Background Image Behind Component
body: <p>I'm trying to add a background image behind my Form component in a react App, but the background shows up only on part of the screen. I want it to be spread across the entire screen. This is the code for my Signup component that nests the Form component inside of it.</p>
  
  <p>Is there an easier/better way to do this? I am new to React and web development. Thanks!</p>
  
  <pre><code>import React from "react";
  import Form from "../Form";
  import logo from "../../images/logo.png";
  import background from "../../images/login_background.png";
  
  class Signup extends React.Component {
    onSubmit = fields =&gt; {
      console.log("Got", fields);
    };
    render() {
      return (
        &lt;div
          style={{
            backgroundImage: `url(${background})`,
            backgroundSize: "cover"
          }}
        &gt;
          &lt;div
            style={{ position: "relative", top: "200px" }}
            className="ui centered aligned grid"
          &gt;
            &lt;div&gt;{/* &lt;img src={logo} alt="intecreate logo" /&gt; */}&lt;/div&gt;
            &lt;div className="ui raised segment"&gt;
              &lt;Form onSubmit={fields =&gt; this.onSubmit(fields)} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Signup;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/oLn2R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oLn2R.png" alt="Current Background Image"></a></p>