如何将图像定位在固定响应式引导程序图像上

Question

So I'm building a simple bootstrap site (the top so far):

and I'm trying to get this effect in the top background image:

As you can see the second image has a slightly transparent png image lodged on top of the navigation. How would I get something like this to be fixed and responsive? I'm having trouble with absolute positioning and such. Thanks for any insihgt!

Edit: I haven't even gotten the second image to work out in the css, that was simply an edit in Photoshop.

Relevant HTML

<!-- Top Background image above Nav -->

<div class="container-fluid parallax-1" id="Title">
    <div class="container-fluid parallax-inner">

        <div class="row">
            <div class="col-sm-12 col-lg-12 text-center">
                <h1 class="fade1"> Italian Joe's </h1>
            </div>

          </div>
        </div>
    </div>
</div>


  <!-- End Title Parallax -->

  <!-- Start Navbar -->

  <nav class="navbar navbar-inverse">
    <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>
        <a class="navbar-brand" href="#">Italian Joe's</a>
        <p class="navbar-text text-center" id="NavHours" style="color:white; width: 230px;"> Open 6am to 5pm </p>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-right">
          <li id="Home" class="active"><a href="#">Home</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">About</a></li>
          <li id="location"><a href="#">Location</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- End Navbar -->

Relevant CSS

/* --- Navbar --- */

.fade1{

    font-family: 'Jim Nightshade', cursive;
    font-size: 8.9em;
    font-style: italic;
}

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
    background-color:black;
}

.nav.navbar-nav.navbar-right li a {
    color: white;
}


.navbar-inverse .navbar-brand {
    color: white;
}

/* Hover */

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    background-color: black;
}


/*-- Stubborn Home Element -- */

.navbar.navbar-inverse .navbar-nav>li {
      border-bottom: solid 1px;
      border-color: white;
      text-align: center;
    }

#Home {
       border-top: solid 1px;
      border-color: white;
      text-align: center;

}



.navbar .navbar-collapse {
  text-align: center;
  padding: 0px;
}

/* --- End Navbar --- */


/* --- Title Parallax --- */

#Title {
    padding-top: 5%;
    color:white;
}

/* --- End Title Parallax --- */

/*----Start Parallax Sections----*/


.parallax-1 {
    background: url("../img/pizzatitle.jpg") fixed 100%;
    background-size: cover;
    background-repeat: no-repeat;
   }

.black_brush {
    top: 40%;
    width: 100%;
    height: 200px;
    background: url("../img/blackbrush.jpg");
    position: relative;
    z-index: 1;
}


.row {

    margin: 0px;
}

.parallax-inner {
    padding-bottom: 5%;

}

.clearfix{

    clear: both;

}

.parallax-inner h3, .parallax-inner p {
    color: #F1F1F1;

}

/*----End Parallax Sections----*/

ALL Code

https://codepen.io/Sovember/pen/OpwXKe

Answer 1

Use bootstrap navigation bar if you want it to be fixed on the top. I don't understand exactly what you mean with the transparency of the image. If you want it removed, then use this:

opacity: 1;