Unable to show content after displaying full-screen image background

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;
} 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement an IF THEN ELSE statement using ngStyle in Angular?

How can I make rows in a table highlight based on the STATUS value? Currently, I have it set up to show yellow if the STATUS is 1 using the following code: [ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : '&a ...

The alert stubbornly refuses to close even when attempting to do so

I am encountering an issue with an alert in my Bootstrap 5 project. The alert does not close when I click on the "X" button. https://i.sstatic.net/pvCdm.png Below is the code snippet: {{#if success}} <div class="container p-4"> ...

CSS styles are not getting rendered by Firefox when loading content using jQuery AJAX

My website allows users to comment on books and articles, with a search input to find relevant sources. Using jQuery, I dynamically load new sources from an outside site based on search terms and display them in a list using AJAX. However, I’m facing two ...

Having trouble with your jQuery code not loading properly?

Currently working on debugging jQuery code and facing an issue where a particular section of the code is not being triggered upon clicking. The HTML/PHP in question: $cartlink .= "<a class='add_to_cart button' data-id='{$product->id} ...

Tips for adjusting the width of items within the Box element in Material UI React

I am utilizing React Material UI along with the Box component to style my form. In this scenario, I have 4 items in each row except for the last row where I need to display only 3 items with the last item filling the entire row by merging two elements toge ...

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

As I type into a text box and log the keydown event in Chrome, I notice that it has various properties (specifically, I'm interested in accessing KeyboardEvent.code). Console Log Output { altKey: false bubbles: true cancelBubble: false cancelable: t ...

What is the process for modifying the path and polyline in an SVG file?

I have a pair of SVG icons that I am working with. Recent Update: Icon One Icon Two One question that I have is whether it is possible to create both icons using the same HTML markup? For instance, can I use something like: <g> <circle ... ...

I'm about to lose my mind because of this JavaScript code - is there a syntax

My code is showing an unexpected token < error, even though all the < signs are correctly placed. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> </head> <body& ...

adjusting dimensions of swf file within html code

I am trying to insert a small speaker icon from the following url: . However, when the flash is loaded, the dimensions of the swf file exceed those specified in the html tag. How can this issue be resolved? <div style="display: inline;float:center;"& ...

Guide to creating a continuous loop for CSS3 animation

I'm looking to create a setup that can play on repeat, but I'm not very familiar with jQuery. Can anyone lend a hand with this? Check out the DEMO here $('.title1').fadeIn('fast', function() { $('div').addClass ...

Tips for keeping the scroll position of a bootstrap table when reloading the page

Displayed below is a bootstrap table with specific features. <div class="row"> <table id="question-selection" class="table table-sm table-hover table-wrapper"> <tbody> {% for placer in chapter_questions %} ...

Conceal the element if the output of express is void

I am currently developing an app using nodejs and express. I am retrieving JSON data from an endpoint and displaying it on the page based on the values received. The issue I am facing is that if I receive a null or undefined value from the JSON data, how ...

Keep elements in position when their bottom edge becomes visible while scrolling

This task may appear intricate, but I will do my best to explain it! I want to create a continuous scrolling article display similar to Bloomberg Politics (), but with a slight twist. My idea is to have the current article's bottom edge stick to the ...

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

Enhancing tabbing accessibility with order classes in Bootstrap 4 for improved navigation

Having trouble with the bootstrap order classes like order-2 order-md-1 in conjunction with tab order for accessibility reasons. My goal is to align the tab flow with the visual flow. Take a look at this code: <div class="row"> <div class="c ...

Conversation panel text slipping out of <div>

I am currently working on creating a mock "chat" feature. The issue I am facing is that when I repeatedly click the "send" button, the text overflows from the div. Is there a way to prevent this by stopping the text near the border of the div or adding a s ...

What is the best way to extract the chosen value from a dropdown menu within the $_POST array?

In my HTML code, I have a droplist using the <select> tag. How can I retrieve the selected value from the $_POST array once the user submits the form? <form action="subj_exec.php"> <?php echo $_SESSION['SESS_MEMBER ...

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

There are two buttons (images with anchors) on the page: "Download from Google Play" and "Download from App Store". The request is to have them stick to the bottom, but once the footer is reached they should return to their original position. Here are two ...

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

Enable images to overlap with pre-set dimensions

Is it achievable for an image to overlap another div (a bootstrap column) while maintaining a fixed size of 155px? I am utilizing bootstrap columns (col-9 and col-3). This is the desired outcome (for illustration purposes, Orange and Grey boxes are image ...