Css 在与主要内容关联的导航栏中添加背景

如何将背景图像与导航栏关联？我尽力把它联系起来，但失败了。你有什么教程或技巧吗？我怎么做

这是我的索引

好的，给你：

基本上，标题没有图像，但是透明的。

---

如果您向下滚动，标题透明度将变为白色。
您可以提供示例代码吗？您想要一个单页应用程序，根据所选的菜单点显示不同的内容还是什么？@AlbertoI.N.J。给你go@noa-dev我希望我的导航栏背景与我的bgp图像相同您希望对导航使用相同的背景图像，以便内容+导航具有相同的图像吗？如果是这种情况，请不要将背景图像附加到div，而是附加到body元素
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav><!--End of navbar-->

    <!-- start of picture div-->
    <div id="bgp">

              <h1 id="top-header">

              </h1>  

    </div>

#bgp
{
background-image: url("images/city.png");
opacity: 0.8;
width: 100%;
height: 100rem;
background-size: 100%,500%;
background-repeat: no-repeat;
}