Change the background image of the nav-pills bootstraps

Question

I asked a friend to create a site. I used bootstrap 3 as the basis for the website and hit the stumbling block a bit.

My friend wanted to create a tab where the background image of the section changes depending on which tab is active. I was able to make it work only on the tab using css, but I need to be able to change the entire background of the section, not just the tab bar.

I think this will require some kind of JavaScript, but unfortunately my skills in this area are still too weak to know how to do this, and google was just as useful as a hole in my head.

below is the html section that I need for 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 individual css background images on them:

 #aboutus { background-image:..... } #history { background-image:..... } #chef { background-image:..... } 

Answer 2

I checked your code, everything works fine, and if you want to change only the contents of the background, Carol McKay wrote that you should add to your code. In this case, you do not need javascript code.
I created a small example with your codes and bootsrap classes: jsfiddle-link
All the spaces you see depend on the boot classes, for example, the default .alert class has:

 .alert { padding: 15px; margin-bottom: 20px; ... } 

And another example with the content below pills and looks more familiar): jsfiddle-link2