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:
wp_enqueue_script()
or the like. 2nd: WordPress uses jQuery in noConflict mode, so you'll need to replace the$
withjQuery
.