Custom dimension Header Image upload in Twenty Thirteen

  • Hello,

    I am wanting to upload my own custom header through my child theme in twenty thirteen that has dimensions 1000×222.

    I found online the option to put this into the function tab:

    define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘basic_header_image_width’, 1000 ) );
    define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘basic_header_image_height’, 222 ) );

    And this worked when I uploaded the header but for some reason the actual header image is blown up on the website and only a part of it is visible. And my image is exactly 1000×222 size. Anyone has an idea why this is happening?

    Also, I noticed that the image is not getting “shrunk” if the browser size is reduced. Is there way to still retain that option?

    Here’s the website:
    https://perziedesign.com/

    Thanks for the help

    [No bumping. If it’s so urgent that you cannot wait for more than 1 hour, consider hiring someone.]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter icakeov

    (@itucakov)

    I solved this by adding this to my css code:

    .site-header { background: url("https://perziedesign.com/wp-content/uploads/2013/08/Perzie_header1.jpg") no-repeat scroll center top / 1000px auto transparent;
}

    But it doesn’t seem to work in Safari. The original email still loads

    I tried adding !important but it didn’t work either

    What version of Safari are you running. You’ll probably just have to change your CSS declaration?

    Thread Starter icakeov

    (@itucakov)

    Hi, I’m running Safari 6.0.5
    I am not familiar with CSS declaration, is it a line of code in the styles sheet?
    Thanks for the response by the way

    Thread Starter icakeov

    (@itucakov)

    I realized that the same thing happens on my iphone as well.

    Try replacing:

    .site-header { background: url(“https://perziedesign.com/wp-content/uploads/2013/08/Perzie_header1.jpg”) no-repeat scroll center top / 1000px auto transparent;
    }

    with

    .site-header {background-image: url(“https://perziedesign.com/wp-content/uploads/2013/08/Perzie_header1.jpg”)!important;
    background-size: 1000px auto;
    }

    Thread Starter icakeov

    (@itucakov)

    I really hope I can get more feedback on this one. Thanks!

    Thread Starter icakeov

    (@itucakov)

    Hi coder314159, thanks for the suggestion.
    I tried it but it didn’t seem to work.
    At least not in Safari. It looks like it did work on the iPhone. In Firefox it works, but when I inspect things in firebug, I can see the code not being overridden.
    Looks like when the function gets called in the header, it overrides it despite the “!important” tag.
    I am not very familiar with functions so not sure how to solve that one if the issue is around a function call in the header…

    [No bumping, thank you.]

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom dimension Header Image upload in Twenty Thirteen’ is closed to new replies.