0

There's a piece of inline CSS code:

<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 theme/site homepage, and I want to get the 'background-size' to "100%" with or without the "!important".

I have a plugin called Code Snippet that's supposed to enable PHP without messing with source files, and I used:

<?php
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?

And what if I wanted to make the style only at a certain screen size, like:

@media screen and (max-width: 760px){#header.header-front-page{background-size:100!important;}}

How would I go about doing that with PHP/Javascript? This also doesn't work.

<?php
function wpb_hook_javascript() {
  if (is_front_page ()) { 
    ?>
        <script type="text/javascript" src='jquery.min.js?ver=3.5.1'>
        if (matchMedia("(max-width: 760)").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');

EDIT: the following are the web inspector details: so these are the relevant HTML styles in the "Elements" tab of inspector in Chrome:

<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;}
#header.header-front-page {background-attachment: scroll !important;}
</style>

and the actual element HTML:

<header id="header" class="header-front-page" style="background-image: url(https://image.png);
background-attachment: fixed;" aria-hidden="false">
</header>

and this in the "Styles" inspector:

Styles

1
  • 1st: injecting inline CSS / JS into WP template files isn't the WordPress way. They should be enqueued using wp_enqueue_script() or the like. 2nd: WordPress uses jQuery in noConflict mode, so you'll need to replace the $ with jQuery.
    – Pat J
    Commented Mar 7, 2021 at 21:14

1 Answer 1

0

why you prefer use javascript instead off css it self? javascript will overwrite the css rules if you put in wrong ways.

please provide me the web inspect (if you use chrome or firefox). sometimes, css will not work if precedence not qualified reff: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

if you cant provide the web inspect, would you like to provide me the url instead?

1
  • I'm not using CSS itself because the site uses inline (HTML <style>) CSS with !important, which I believe holds the highest importance. I tried using CSS and adding it, but it didn't work. I am going to add web inspect details to the original post. Thank you!
    – JJL
    Commented Mar 7, 2021 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.