Title: CSS over-rides jQuery.css() – help please
Last modified: August 21, 2016

---

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

 *  [heffegg](https://wordpress.org/support/users/heffegg/)
 * (@heffegg)
 * [12 years ago](https://wordpress.org/support/topic/css-over-rides-jquerycss-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

Viewing 1 replies (of 1 total)

 *  Moderator [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
 * (@jdembowski)
 * Forum Moderator and Brute Squad
 * [12 years ago](https://wordpress.org/support/topic/css-over-rides-jquerycss-help-please/#post-4928950)
 * I’m loath to suggest it but in you jQuery file have you considered using `!important`
   to force the CSS you want?

Viewing 1 replies (of 1 total)

The topic ‘CSS over-rides jQuery.css() – help please’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [CSS error](https://wordpress.org/support/topic-tag/css-error/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [Load problem](https://wordpress.org/support/topic-tag/load-problem/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/css-over-rides-jquerycss-help-please/#post-4928950)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics