React Adding Background Image Behind Component - css

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>