How to fix repeating content on top of a background image? - html

Question

I have a background image with a navbar and some content on top of it. What is happening is the navbar and related content that is inside the bgimg div is repeating on top of the background image which covers the entire screen.
<div class="bgimg">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="d-flex flex-grow-1" style="margin-left: 5%">
<span class="w-100 d-lg-none d-block"></span>
<a class="navbar-brand" routerLink="/">Home</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7" style="margin-right: 5%">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a routerLink="/software" class="nav-link">Software</a>
</li>
<li class="nav-item">
<a routerLink="/about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a routerLink="/contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="myName">
<span>blah</span>
<div class="description">
<span>Developer</span>
</div>
</div>
</div>
.bgimg {
background: url("/assets/images/DSC01250.jpg") no-repeat center center fixed;
background-size: cover;
opacity: 0.8;
}
.myName {
font-family: 'Courier New', Courier, monospace;
margin-top: 300px; //half page height
color: white;
font-size: 50px;
text-align: center;
}
.description {
font-size: 25px;
}
I would just like one background image that covers the screen with no repeating content on top of it.

Answer 1

I ended up adding a position: fixed; attribute and adding a width and height attribute to hold all divs true to their parent container.