Override Wordpress Theme In-Line Style With CSS

Question

Thanks in advance for your time and assistance!

I'm trying to edit the header image on a Wordpress Theme with little luck. It seems to be an "in-line style" which I haven't encountered before. I've searched quite a bit but nothing seems to be working for me, including using important! (though perhaps I'm using it incorrectly).

All I'm trying to do is change the background-size:cover to background-size:120% so the image scales better on smaller screens. Right now it chops my face in half when viewing on mobile which is not ideal.

<div id="custom-header" style="background-    image:url(http://brentbareham.com/wp-content/uploads/2016/09/HeaderImage.jpg);background-size:cover;">
        <div class="container">
                    <div class="header-content">
                            </div><!-- .header-content -->
                </div><!-- .container -->
    </div>

This is the first theme I've ever edited a theme extensively. I'm using a child theme, not that that should matter, and I've been successful thus far but I can't seem to figure this one out.

So you can see exactly what I'm looking at, the website is http://brentbareham.com

Thanks again!

It stinks, but you can use `!important` in your css to override inline styles like this. `#custom-header { background-image: none !important;}`, for example, will override that inline-style. — random_user_name, Sep 20 '16 at 17:47
Thanks for the info, @cale_b! I must be using `important!` the wrong way. There are some over div's above the `#custom-header` such as `#masthead`. When I just type in `#customerheader {background-size:120%}` nothing happens. I've tried `.custom-header` to no avail either. What am I doing wrong? — supermanhasfallen, Sep 20 '16 at 18:24
I figured out why it wasn't working. I had another piece of code that said `.builder-overlap #custom-header { padding: 0 0 600px; }` And that seemed to be preventing the background resize from working. Thanks again for your help! — supermanhasfallen, Sep 20 '16 at 18:56

score 0 · Answer 1 · answered Sep 20 '16 at 19:31

0

So long as the inline style does not have !important on it, you can use straight css !important to accomplish what you want:

#custom-header {
    background-image: none !important;
}

Here is a jsFiddle that demontrates that it works.

answered Sep 20 '16 at 19:31

random_user_name

25,694
7
76
115

score 0 · Answer 2 · answered Sep 28 '16 at 10:58

using jquery you can override image

myscript.js you can add theme js folder

jQuery(document).ready(function(){
    jQuery("#custom-header").removeAttr("style").attr("style","background-image:url(http://brentbareham.com/wp-content/uploads/2017/Image.jpg)");
})

in theme functions.php

function js_head_scripts() {
    wp_enqueue_script( "headerjs",  get_template_directory_uri()."/js/myscript.js" );
}

add_action('wp_head', 'js_head_scripts');

score -1 · Answer 3 · edited Jun 20 '20 at 09:12

You have to use JavaScript to override inline styles. Because of the browser render order, it's the inline styles that get higher a higher importance. So in order to restyle that you have to use JS. This however will cause a reflow i.e. the page will be redrawn which looks like a flicker.

Here some good info to know.

How the Browser Works

Update

Sorry. @Cale_b is correct. the code that you show does not have !important assigned to any of the styles. So there are a couple of things.

1). I am not sure if it is a typeo, but you have a space in the HTML code that you have posted here.

<div id="custom-header" style="background-  image:url(....
<!-- should be -->
<div id="custom-header" style="background-image:url(....

2). Changing the background-size to "contain" will probably give you the affect you are looking for. It will constrain the image inside of the div element. No JS needed.

3). You may want to try this.

div#custom-header[style]{
    background-size: contain;
}

CSS3 background-size Property

Thanks for the info @andre mcgruder! I know even less about JS than I do about CSS. Does the Javascript go right into the CSS.styles sheet? If so, can you give me an example of how I would write this. If not, it may be over my head, honestly. Thanks for your help! — supermanhasfallen, Sep 20 '16 at 18:30
Simply not true. See [this fiddle](https://jsfiddle.net/cale_b/f1eawmL5/) that proves you can override inline styles with CSS. — random_user_name, Sep 20 '16 at 19:26

Override Wordpress Theme In-Line Style With CSS

3 Answers3

Update