title: bootstrap navbar inherit a gradient color of parent
body: <p>I'm trying to figure out how to change the background color of a bootstrap nav bar to match the background of the element, in this case the body tag, behind it.  The effect I am wanting is similar to 'background-color:transparent' but I don't want it transparent; I want the page to flow behind it still as you scroll down.  I also do not want it to inherit the parent background as it is a linear-gradient.  What I am looking to do is set the background of the whole nav bar as the current color behind the nav bar on the parent element behind it.<br>
  Since that didn't come out very clear, I set up an example in jsfiddle: <a href="https://jsfiddle.net/y1Lev5o6/2/" rel="nofollow">https://jsfiddle.net/y1Lev5o6/2/</a></p>
  
  <p>Using bootstrap resources, here is the html on the fiddle</p>
  
  <pre><code>&lt;body style="background-image:-webkit-linear-gradient(top,#023322,#ffffff); background-repeat:no-repeat; height:1000px;"&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top" style="background-image:none; background-color:transparent;"&gt;
      &lt;div class=" container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav" style="color:white;"&gt;
              &lt;li&gt;Home&lt;/li&gt;
              &lt;li&gt;About&lt;/li&gt;
              &lt;li&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container body-content"&gt;
      &lt;div style="background-color: white; height: 100px;margin-top:200px;"&gt;
          I don't want to see white in my nav bar&lt;/div&gt;
      &lt;footer style="padding-top:200px;"&gt;
          &lt;p style="color:white;"&gt;&amp;copy; my website&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you scroll down on the results of the fiddle I think it is obvious of what I am trying to accomplish, or in this case prevent.  I want all my page elements to flow behind my nav bar, but want the nav bar to pick up the color directly behind it on the body tag.</p>