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