Css parallax doesn't work - css

Question

Hey guys I'm following the W3S tutorials and I want to archive the parallax effect. I've tried many times and I don't know why the picture doesn't show.
I did the exact same thing on another project and it worked just fine. I really don't know what I did wrong. My reputation it's kinda bad here because of my "stupid questions", so I'm sorry if this question offend someone.
Have a look at my code:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 19px;
line-height: 1.6;
}
#showcase {
background-image: url('https://picsum.photos/g/1900/1080?random');
height: 100vh;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: top;
}
.button {
background-color: black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.Bshadow:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.pacifont {
font-family: 'Pacifico', cursive;
font-size: 4.8rem;
color: white;
}
.name {
color: #008c06;
}
.topnav {
overflow: hidden;
/* background-color: #333; */
border-bottom: 3px solid #008c06;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #008c06;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.parallax {
/* The image used */
background-image: url("https://picsum.photos/500/1081/?random'");
/* Full height */
height: 100%;
width: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<header id="showcase">
<div class="topnav sticky" id="myTopnav">
Home
News
Contact
About
☰
</div>
<h1 class="pacifont">Welcome <a class="name">Felix!</a></h1>
READY?
</header>
<a class="weatherwidget-io" href="https://forecast7.com/en/50d854d35/brussels/" data-label_1="Bruxelles" data-font="Jura" data-icons="Climacons Animated" data-days="3" data-theme="gray">Bruxelles</a>
<h1>wtf</h1>
<div class="parallax"></div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus odit dolorum sed ut, doloremque consectetur.</p>

Answer 1

Change the height of .parallax class to 100vh instead of 100%.