ReactJS and rendering issue - css

Question

I was just creating a web app using ReactJS but the problem is, the background image is not getting rendered properly.
Given below is the code snippet.
class WeatherComponent extends Component{
constructor(props){
super(props);
this.state={
key: 'XXXXXXXXX',
place: 'New York',
temperature: '17',
description: 'Light Rain'
}
this.handleSubmit=this.handleSubmit.bind(this);
this.update=this.update.bind(this);
}
update(values){
this.setState({ temperature: values.current.temperature })
this.setState({ description: values.current.weather_descriptions[0] })
}
handleSubmit(value){
fetch('http://api.weatherstack.com/current?access_key=' + this.state.key +'&query='+ value.place)
.then(response=>response.json())
.then(values=>this.update(values))
this.setState({ place: value.place })
}
render(){
return(
<div className='background-style'>
<div className='box'>
<div className='search-box'>
<input type="text" placeholder="search"/>
<button type='submit' className='button text-small'>Search</button>
</div>
</div>
</div>
)}
}
The CSS file is:
.text{
font-family: 'PT Sans Narrow';
font-size: 50px;
font-weight: lighter;
color: crimson;
}
.text-small{
font-family: 'PT Sans Narrow';
font-size: 20px;
font-weight: lighter;
color: white;
}
.box{
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: 450px;
height: 700px;
background-image: url("./assets/images/wall.jpg");
}
.search-box{
position: absolute;
}
.button {
background-color: rebeccapurple;
border: none;
outline: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
}
.background-style{
background-image: url("./assets/images/sunny.jpg");
background-size: cover;
background-position: bottom;
}
If I change the .box.position attribute to relative in the CSS file, the background image is rendered but then the search box is not rendered. Making the attribute absolute completely removes the background image from rendering, I don't know why this happens, some help to solve this issue is much appreciated.