У меня есть фоновое изображение с навигационной панелью и некоторым содержимым поверх него. То, что происходит, - это навигационная панель и связанный контент, который находится внутри div bgimg, повторяется поверх фонового изображения, которое покрывает весь экран.
<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;
}
Мне бы хотелось, чтобы одно фоновое изображение покрывало экран без повторяющегося содержимого поверх него.