Changing background image bootstrap nav-pills - html

Question

I've been asked by a friend to create a website.
I've used bootstrap 3 as a framework for the website and have hit a bit of a stumbling block.
My friend wanted a tabbed section where the background image of the section changes depending on which tab is active. I've been able to make it work for just the tab-pane using css, but I need to be able to change the entire section background and not just the tab pane.
I think it will require some JavaScript, but unfortunately my skills in that area a still a bit too weak to know how to do this, and google has been about as helpful as a hole in the head.
below is the section of html that i need the background image to change with each tab
<section id="about" class="content-section text-center">
<div class="row">
<div class="tab-content vertical-center">
<div id="aboutus" class="tab-pane fade in active">
<h2>...</h2>
<p>...</p>
</div>
<div id="history" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
<div id="chef" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 nav-pills-bg">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a data-toggle="pill" href="#aboutus">...</a>
</li>
<li>
<a data-toggle="pill" href="#history">...</a>
</li>
<li>
<a data-toggle="pill" href="#chef">...</a>
</li>
</ul>
</div>
</div>
Any help is appreciated

Answer 1

Put your separate css background images on these:
#aboutus {
background-image:.....
}
#history {
background-image:.....
}
#chef {
background-image:.....
}

Answer 2

I checked your code, all works fine and if you want change only contents background, Carol McKay wrote what you have to add in your code. You don't need in this case any javascript code.
I created small example with your code and bootsrap classes: jsfiddle-link
All gaps you can see depends bootstrap classes, for example, by default class .alert has:
.alert {
padding: 15px;
margin-bottom: 20px;
...
}
And one more example with content below pills and looks more familiar): jsfiddle-link2