React Adding Background Image Behind Component

Question

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.

Is there an easier/better way to do this? I am new to React and web development. Thanks!

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 => {
    console.log("Got", fields);
  };
  render() {
    return (
      <div
        style={{
          backgroundImage: `url(${background})`,
          backgroundSize: "cover"
        }}
      >
        <div
          style={{ position: "relative", top: "200px" }}
          className="ui centered aligned grid"
        >
          <div>{/* <img src={logo} alt="intecreate logo" /> */}</div>
          <div className="ui raised segment">
            <Form onSubmit={fields => this.onSubmit(fields)} />
          </div>
        </div>
      </div>
    );
  }
}

export default Signup;

Answer 1

Give more 200px to the background

Because you use top: 200px you have to make up for it and increase the div of the background. One way is to add height: calc(100% + 200px);

It will help to get a work link in codepen for instance.

And better you use class and not inline style for the beginning :)

After comment adding example

Simple example that show what I mean.

The father must have height.

body{
  margin: 0;
}

.centered{
  text-align: center;
  height: 200px;
}

.wrap{
  background-image:url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: cover;
  height: calc(100% + 50px);
}

.segment{
  background-color: #3791e1;
  height: 200px;
  width: 150px;
  top: 50px;
  position: relative;
  margin: 0 auto;
}

  <div class="ui centered aligned grid">
    <div class="wrap">
    <div class="ui raised segment">
      Form
    </div>
  </div>
</div>