I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach.
The specific image I am attempting to display at full-size can be found https://i.sstatic.net/lQaNy.png
However, the current output seems to differ from what I intendedhttps://i.sstatic.net/9i9Wl.png
Despite setting the height to 100%, the image still does not appear as expected :-("
.App {
text-align: center;
height:100%;
width:100%;
}
body, html {
height:100%;
width: 100%;
}
.bg {
/* The image used */
background-image: url("./../../images/City.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
This is how my App.js looks like:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return <div className="App">
<div className="bg">
hello world
</div>
</div>;
}
}
Thank you for your assistance!
Update: Here is the result after applying one of the solutions provided in the responses