title: Image over Bootstrap NavBar, fading out when scrolling
body: <p>I am looking for a solution for the following scenario. I am using the Bootstrap NavBar. Further I managed to display a full-width image on top of the NavBar, see the screenshot below.</p>
  
  <p><a href="https://i.stack.imgur.com/sy723.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sy723.png" alt="Picture showing full-width image over the NavBar"></a></p>
  
  <p>On the left hand side there normally is another figure. <a href="https://jsfiddle.net/wazaari/wkg1086t/2/" rel="nofollow noreferrer">See this JsFiddle</a> for both the HTML and CSS code, the following listing provides an excerpt of the relevant code.</p>
  
  <pre><code>#header {
      width: 100%;
      background-image: url(http://s23.postimg.org/9ym003hd7/headbg.png);
      background-repeat: repeat-x;
      height: 185px;
      position: fixed;
  }
  #header img {
      margin-top: 20px;
      margin-left: 20px;
  }
  .navbar-fixed-top {
      top: 140px;
      padding-right: 20px;
  }
  .wrap &gt; .container {
      padding: 210px 15px 20px;
  }
  </code></pre>
  
  <p>I want the following behaviour: When the content is long enough, scrolling down should move both NavBar and header upwards, such that the header eventually is hidden. The NavBar however should stay at the top of the page, even if the content of the page longer. It this possible?</p>