Just diving into the world of HTML and CSS (with a touch of Bootstrap), I've set out to create a basic scrolling webpage. However, I've hit a roadblock with the background image not covering the full height of the page. It seems to stop at the h2 text, behaving as if that element marks the end of the page. I've tried everything I can think of to rectify this issue, but to no avail. It's a simple problem, I'm sure, but one that has me completely stumped. Any advice or guidance on how to fix this would be greatly appreciated.
Check out the codepen for reference.
body {
background-color: rgb(255, 255, 255);
}
#front {
background: url("https://image.ibb.co/mjTmwv/port34.png") no-repeat;
overflow: hidden;
background-size: cover;
width: 100%;
height: 100%;
}
#h1 {
color: white;
font-size: 50px;
margin-top: 40vh;
padding: 10px;
background: rgba(43, 142, 255, 0.4);
}
#pt {
color: white;
font-size: 30px;
background: rgba(39, 220, 130, 0.4);
}
<ul style="z-index:9;">
<li>
<a class="active" href="#"><img class="img-fluid" style="width:auto;height:auto;max-height:26px;max-width:20px;" src="https://image.ibb.co/mg1s3a/lyreimage27.png" alt="website icon"></img> placeholder inc.</a>
</li>
<li><a href="#">About
</a>
</li>
<li><a style="text-decoration:none" href="#">Portfolio</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<header>
<div id="front">
<div class="container-fluid">
<h1 id="h1" class="text-center">Placeholder</h1>
<h2 id="pt" class="text-center">Placeholder Text</h2>
</header>