How To Change The Twenty Seventeen Site Header Image

Written by

Bharat Karavadra

in

You can change the site header image from the default image to an image of your preference.

You can see examples of the default site header image and a custom site header image below.

Default site header image.

Twenty Seventeen Default Header Image

Custom site header image.

Twenty Seventeen Custom Header Image

Where and how to change the image:

In WordPress Admin > Appearance > Customise > Header Visuals > Current Header > Add New Image

The recommended size is 2000 x 1200 pixels, a ratio of 5 to 3.

I uploaded an image of size 1920 x 1080 pixels which is not a ratio 5 to 3, as I usually use the dimensions of HD video.

The customizer suggested cropping the image but I skipped that and the header seems to appear OK. You may have to test whether or not your image requires cropping.

Click ‘Save & Publish’ at the top to use the new header image.

Share this:

Comments

12 responses to “How To Change The Twenty Seventeen Site Header Image”

  1. Marzena avatar
    Marzena

    Hi Bharat. Currently, in a single post view, there is a cropped header image and below and a featured image assigned to a specified post. I want the header image to be replaced by each featured image in each post page. Do you think it is possible?

    Reply
    1. Bharat Karavadra avatar
      Bharat Karavadra

      Hello Marzena,
      I am not sure how to do this at the moment but will look into it when I have a moment.

      Reply
      1. Marzena avatar
        Marzena

        Great :) I am also working on it!

        Reply
        1. Bharat Karavadra avatar
          Bharat Karavadra

          Marzena,
          Can you share the customisation here if you create one. Thank you.

          Reply
  2. AJ avatar
    AJ

    How could I just hide the header on the subpages? It looks nice on the homepage, but crops badly on the subpages.

    Reply
    1. Bharat Karavadra avatar
      Bharat Karavadra

      Hello AJ,
      The site header contains the background image, logo, title and the description.Which of these did you want to hide?

      Reply
      1. AJ avatar
        AJ

        I want to hide the image, but just on the sub pages

        Reply
        1. AJ avatar
          AJ

          This seems to do it, but I figured there might be a cleaner way than just specifying pages

          .page-id-2 .custom-header {
          display:inline;
          }

          .page-id-33 .custom-header {
          display:inline;
          }

          Reply
  3. Mark avatar
    Mark

    Hi thanks for getting back to me… that didnt work for me tbh, but I did manage to resize it.

    To be clear. I want to use one banner (standard size) across the site, ie the one which is used on the internal pages ie the same one specified here:

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media

    I’d like to use that site wide is that doable and if so how?

    Reply
    1. Bharat Karavadra avatar
      Bharat Karavadra

      Hello Mark,
      On quick look I do not have a solution, however I am sure it is possible. I will look into it when I have a moment but you can try here https://wordpress.org/support/theme/twentyseventeen/ and can you let me know what it was about the way in the link I provided that did not work for you?

      Reply
  4. Mark avatar
    Mark

    Hi Sal.

    This might sound a bit odd, I don’t want the large parallax style background image on the home page, instead I want to display a static banner image like those on the internal pages ie not the home page, is that doable and if so how?

    Regards
    Mark

    Reply
    1. Bharat Karavadra avatar
      Bharat Karavadra

      Hello Mark,
      I am unclear as to whether it is the very top header image on the home page that you do not wish to appear and as large in height as it is, or something else. If it is the former header image that you want to reduce the height of then the link below has the instructions to reduce the header height on the front page.
      http://karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/
      If it is something else that you want then please clarify.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts

>