Title: Overriding inline !important CSS with Javascript code snippet
Last modified: March 5, 2021

---

# Overriding inline !important CSS with Javascript code snippet

 *  [deulseobs](https://wordpress.org/support/users/deulseobs/)
 * (@deulseobs)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/overriding-inline-important-css-with-javscript-code-snippet/)
 * There’s a piece of inline code that is:
 *     ```
       <style type="text/css" id="illdy-about-section-css">
       #header.header-front-page {background-image: url(image.png) !important;}
       #header.header-front-page {background-position-y: center;}
       #header.header-front-page {background-position-x: center;}
       #header.header-front-page {background-size: auto !important;}
       ```
   
 * on a WordPress site and I want to get the ‘background-size’ to “100%” with or
   without the “!important”.
 * I’m using Code Snippets, and in the code box, I entered:
 *     ```
       function wpb_hook_javascript() {
         if (is_front_page ()) { 
           ?>
               <script type="text/javascript" src='jquery.min.js?ver=3.5.1'>
                 // your javascript code goes here
   
       			$('#header.header-front-page').css('background-size', '')
       			$('#header.header-front-page').css('background-size', '100%!important')
   
               </script>
           <?php
         }
       }
       add_action('wp_head', 'wpb_hook_javascript');
       ```
   
 * But nothing changes in the HTML/CSS or browser inspector. What could be wrong
   here?
    -  This topic was modified 5 years, 3 months ago by [deulseobs](https://wordpress.org/support/users/deulseobs/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [deulseobs](https://wordpress.org/support/users/deulseobs/)
 * (@deulseobs)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/overriding-inline-important-css-with-javscript-code-snippet/#post-14141683)
 * This also doesn’t not work, if I wanted to specify a media query for that element:
 *     ```
       function wpb_hook_javascript() {
         if (is_front_page ()) { 
           ?>
               <script type="text/javascript" src='jquery.min.js?ver=3.5.1'>
       		if (matchMedia("(max-width: 760px)").matches) { 
       			// the viewport is at most 760 pixels wide 
       			$('#header.header-front-page').css('background-size', '100%!important')
               }
               </script>
           <?php
         }
       }
       add_action('wp_head', 'wpb_hook_javascript');
       ```
   
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/overriding-inline-important-css-with-javscript-code-snippet/#post-14154974)
 * I don’t think you can combine a script `src` with inline content. I’d recommend
   separating the two:
 *     ```
       <script src="jquery.min.js?ver=3.5.1">
       <script>
       // your javascript code goes here
       </script>
       ```
   
 * Also, I’d check where you’re getting jQuery from and that it’s linking correctly.
   It’s probably a good idea to use the jQuery version that comes bundled with WordPress
   instead of using a different version.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Overriding inline !important CSS with Javascript code snippet’ is closed
to new replies.

 * ![](https://ps.w.org/code-snippets/assets/icon.svg?rev=2148878)
 * [Code Snippets](https://wordpress.org/plugins/code-snippets/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/code-snippets/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/code-snippets/)
 * [Active Topics](https://wordpress.org/support/plugin/code-snippets/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/code-snippets/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/code-snippets/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/overriding-inline-important-css-with-javscript-code-snippet/#post-14154974)
 * Status: not a support question