CSS over-rides jQuery.css() – help please

Hi,
I have a site where the client would like the background image in the banner to change when the page changes. I have used jQuery to record a click event on li which triggers css(background-image) to change.

It works momentarily BUT the orginal CSS style over-rides the change and the banner reverts to the original image.

How can I stop this from happening?

I have the following code in function.php

function include_jQuery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

function theme_scripts() {
	wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );
	wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'my_style', get_template_directory_uri() . '/css/style.css' );
	wp_enqueue_script( 'toggle-nav', get_template_directory_uri() . '/js/toggle-nav.js');
	wp_enqueue_script( 'background_change', get_template_directory_uri() . '/js/background_change.js');
}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

The jQuery file to change the background is as follows:

jQuery(document).ready( function($) {
// array to store background images
var backgrounds = new Array('01-cheetah.jpg','02-giraffe.jpg','03-tiger.jpg');
// detect which li in the nav was clicked
$( "nav li" ).click(function() {
// 'this' is the DOM element that was clicked
var index = $( "li" ).index( this );
/*
put the image that matches the index in the array into the background of the banner
*/
$("#banner").css('background-image','url(<?php echo get_template_directory_uri() ?>/images/'+ backgrounds[index] + ')');

});
});

any assistance will be gratefully accepted.
Thank you