WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
Header image not displaying (both default and custom) (5 posts)

  1. Filitech
    Member
    Posted 8 months ago #

    The website link: http://www.inadrop.com/sayadaw
    Using a Child Theme for Twenty Thirteen

    I am trying to change the header image of my website but no matter which image I choose I cannot change it. Everything appears to be working, but the header image is not displayed on the website. I cannot find out what might be the problem, I have done some customizations and I have installed some plugins:
    Jetpack
    Disable Comments
    NextGEN Image Gallery
    Styles
    Styles TwentyThirteen

    When I 'Inspect Element' the header, I see that the CSS code that is used to display the header: .site-header {
    background: url(http://inadrop.com/sayadaw/wp-content/uploads/2013/12/Header1.gif) no-repeat scroll top;
    background-size: 1600px auto;

    is 'striped away'. What I mean is that after the part .site-header { everything else has a big line through it. So it appears to me that the code is 'cancelled' somehow, but I am not sure why. I have tried to add the code manually to my CSS file of my Child Theme but it still gets 'striped away'. I tried to include the code !important but it did not work either.

    Would somebody be able to see if I am missing something here?

  2. CrouchingBruin
    Member
    Posted 8 months ago #

    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();
    }
  3. Filitech
    Member
    Posted 8 months ago #

    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?

  4. Paul Clark
    Member
    Posted 8 months ago #

    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.

  5. CrouchingBruin
    Member
    Posted 8 months ago #

    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(http://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.

Reply

You must log in to post.

About this Theme

About this Topic