Background image not working although path is correct - html

Question

I'm trying to clone a website in my local environment. For some reason, background image doesn't show even though the path is correct as shown in the jpg below.
The photo is in the same folder as index.html and style.css. The css is below:
.wallpaper {
background-image:url('jobbatical-1-wallpaper.jpg');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
height: 100%;
}
.navbar {
overflow: hidden;
background-color: green;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.navbar a {
float: left;
display: block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

Answer 1

The problem is that 100% height is useless if the parent has no height.
What do height do you want the image to have? 100% of the viewport or just fill the page?
(100% of the viewport would mean that you have to scroll to see the full picture because of your navbar)
Here is the code of the image should copy the height of the viewport:
(EDIT: maybe you should set the height of the image to 100vh instead of bodys height)
html,
body
{
height: 100%;
margin: 0px;
}
.navbar
{
background-color:green;
height:50px;
}
.image
{
height: 100%;
background-image: linear-gradient(black,gray);
}
<div class="navbar"></div>
<div class="image"></div>
Here is the code if you want to fill the parent (using flex):
body
{
margin: 0px;
}
.viewport
{
height: 100vh;
display: flex;
flex-direction: column;
width: 100%;
}
.navbar
{
background-color: green;
height: 50px;
}
.image
{
background-image: linear-gradient(black,gray);
flex-grow: 1;/*This will make the image to fill the parents space*/
}
<div class="viewport">
<div class="navbar"></div>
<div class="image"></div>
</div>

Answer 2

Your div has no height. You can tell because you can see the position of the paragraph under it.
Since it has no height, there are no pixels to display the background image on.
You need to give it a height.
You have tried giving it height: 100% but a percentage height means height: auto (i.e. the height of the content, of which you have none) when the parent element's height is auto (which the body element is by default).
If you want to make a div take up the remaining vertical space after other elements have been accounted for, look at flexbox for layout. The Holy Grail layout is a fairly extreme example of that.

Answer 3

Space characters aren't allowed in url's.
So you either don't use spaces or encode it when calling it with %20 instead of the space.
I personally use - or _ instead.
Stackoverflow: "href syntax : is it okay to have space in file name"