Header image not displaying (both default and custom)

everything else has a big line through it.

When a CSS property is struck out, that means there’s another rule which has precedence over it. When you inspect the header, you see that the background property for .site-header (which has the image URL) is struck out. If you look at the top of the column, there’s a style for .styles #page #masthead that also has a background property. Because .styles #page #masthead has a higher specificity than .site-header, that background property gets chosen. So you need to understand how CSS specificity works.

So take this rule out of your styles plugin CSS:

.styles #page #masthead {
background: #a12830 url();
}

Thank you! Would you have some piece of advise for me how I could analyse this myself?

And I am using a Child Theme, instead of removing this code from the styles plugin CSS (original), would it also be easier to add a piece of code to my Child Theme?

Hi Filitech,

I’m the author of Styles. CrouchingBruin is correct that’s the code causing your header image to display. It’s being set because you’ve selected a color in header > background color. Since a background image would cover the color, the image is removed.

You don’t need to edit the Styles plugin to change this — you should be able to remove the color setting and save. If that doesn’t work, you can override in your theme’s CSS using !important too.

Would you have some piece of advise for me how I could analyse this myself?

Yes, I actually intended to post a link in my original message, but I enclosed it in a strong tag instead of a link tag.

Here is an article which explains CSS specificity and how to calculate the value.

instead of removing this code from the styles plugin CSS (original), would it also be easier to add a piece of code to my Child Theme?

Yes, all you have to do is use a selector that has a higher specificity than the one that you are trying to override:

body.styles #page #masthead {
background: url(https://inadrop.com/sayadaw/wp-content/uploads/2013/12/Header1.gif) no-repeat scroll top;
}

So what I did was add the body element to the selector, which increases the specificity by 1. In general, you should avoid using the !important clause, and just use a specificity selector that is high enough to give you the results you want. If you become too attached to !important and use it for all of your problems, soon you will run into situations where you have conflicting properties with the !important clause, making it very difficult to override. The only times I use !important is if I have to override inline CSS, which is the only way to do that.