Fullscreen Background Image with React JS Div and Component - css

Question

I'm sure the answer is right in front of me, but I have searched and searched for hours and have been unable to come up with a fix. I am wondering how to have my background image fill the whole screen. It fills most of the screen, except where the header would be. I can get the full screen background image, only when I comment out the "Form" component. When I go to inspect the portion that is not filled, it says it shows as html, which I suspect is pulled from the index.html file in the public folder. I would greatly appreciate any and all help on this.
App.js
import React from 'react';
import './App.css';
import Form from './Form';
import wallstreet from './images/wallstreet.png';
function App() {
return (
<div className="App">
<div className="overlay"
style={{backgroundImage: `url(${wallstreet})`}} />
<Form />
</div>
);
}
export default App;
App.css
#import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
}
.overlay {
position: fixed;
min-width: 100%;
min-height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Form.js
import React, { useState } from 'react';
import FormSignup from './FormSignup';
import FormSuccess from './FormSuccess';
import './Form.css';
const Form = () => {
const [isSubmitted, setIsSubmitted] = useState(false)
function submitForm() {
setIsSubmitted(true);
}
return (
<>
<div className="form-container">
<span className="close-btn">x</span>
<div className="form-content-left">
<img className='form-img' src='images/bullish.png' alt='bullish' />
</div>
{!isSubmitted ? (<FormSignup submitForm=
{submitForm} />) : <FormSuccess />}
</div>
</>
);
};
export default Form;
Form.css
.form-container {
margin: 100px auto;
width: 1000px;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.2);
position: relative;
border-radius: 10px;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.close-btn {
position: absolute;
top: 2%;
right: 3%;
font-size: 1.5rem;
z-index: 1;
color: #fff;
cursor: pointer;
}
.form-content-left {
background: linear-gradient(
90deg,
rgb(39, 176, 255) 0%,
rgb(0, 232, 236) 100%
);
border-radius: 10px 0 0 10px;
position: relative;
}
.form-img {
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form-img-2 {
width: 60%;
height: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form-success {
text-align: center;
font-size: 24px;
margin-top: 80px;
color: #fff;
}
.form-content-right {
border-radius: 0 10px 10px 0;
position: relative;
background: linear-gradient(90deg, rgb(40, 40, 40) 0%, rgb(17, 17, 17) 100%);
}
.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form h1 {
font-size: 1rem;
text-align: start;
width: 80%;
margin-bottom: 1rem;
color: #fff;
}
.form-inputs {
margin-bottom: 0.5rem;
width: 80%;
}
.form-inputs p {
font-size: 0.8rem;
margin-top: 0.5rem;
color: #f00e0e;
}
.form-label {
display: inline-block;
font-size: 0.8rem;
margin-bottom: 6px;
color: #fff;
}
.form-input {
display: block;
padding-left: 10px;
outline: none;
border-radius: 2px;
height: 40px;
width: 100%;
border: none;
}
.form-input::placeholder {
color: #595959;
font-size: 12px;
}
.form-input-btn {
width: 80%;
height: 50px;
margin-top: 10px;
border-radius: 2px;
background: linear-gradient(
90deg,
rgb(39, 176, 255) 0%,
rgb(0, 232, 236) 100%
);
outline: none;
border: none;
color: #fff;
font-size: 1rem;
}
.form-input-btn:hover {
cursor: pointer;
background: linear-gradient(
90deg,
rgb(39, 143, 255) 0%,
rgb(12, 99, 250) 100%
);
transition: all 0.4s ease-out;
}
.form-input-login {
font-size: 0.8rem;
margin-top: 10px;
color: #fff;
width: 80%;
text-align: center;
}
.form-input-login a {
text-decoration: none;
color: #27cdff;
font-weight: 6
00;
}

Answer 1

Did you try 100vh and 100vw along with position absolute.
also search if any of the parent element is having relative position