As I delve into the world of web development, I took on the challenge of creating a navbar with a full-screen image and background. However, when attempting to add text to the image or create an additional section, it does not display as expected. Although setting heights and colors for the section work fine, adding text poses a problem. It seems that the issue lies in the background image due to the object-fit property or positioning. Any guidance on resolving this would be greatly appreciated.
The HTML
<img class="bg-img" src="./images/marcel-hoy-7lmgkNRfbiE-unsplash.jpg" alt="">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Travel Buddies</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Photographs</a>
<a class="nav-link" href="#">Testimonials</a>
</div>
</div>
</div>
</nav>
<div class="features">
<p>Travel Buddies Features</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus animi non, aliquid illum
cupiditate, vel nisi mollitia autem, ad facere ipsa quas aspernatur excepturi. Velit accusamus nobiseos
beatae
cupiditate.</p>
</div>
The CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
}
ol, ul {
list-style: none;
}
.navbar {
padding-top: 30px;
}`
.bg-img {
height: 100vh;
width: 100vw;
filter: brightness(0.5);
object-fit: cover;
position: absolute;
}
.navbar-nav a {
font-weight: 400;
color: #fff;
font-size: 1.25em;
.navbar-brand {
font-size: 2em;
}
.features {
height: 500vh;
background-color: aqua;
}