I created a Plunkr with the following markup:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">MY SITE</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row site-content">
<div class="col-sm-2">
<div class="main-nav">
<div class="navbar">
<div class="navbar-collapse collapse">
<ul class="nav nav-stacked">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-10 body-content">
<!-- Lots of stuff -->
</div>
</div>
</div>
</body>
I want to fix the navbar and menu while ensuring that when scrolling, the page content hides behind the navbar.
How can I achieve this effect with a background image?