How To Change The Twenty Seventeen Site Header Image

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:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.





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

  1. Marzena avatar

    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?

    1. Bharat Karavadra avatar

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

      1. Marzena avatar

        Great :) I am also working on it!

        1. Bharat Karavadra avatar

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

  2. AJ avatar

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

    1. Bharat Karavadra avatar

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

      1. AJ avatar

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

        1. AJ avatar

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

          .page-id-2 .custom-header {

          .page-id-33 .custom-header {

  3. Mark avatar

    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?

    1. Bharat Karavadra avatar

      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 and can you let me know what it was about the way in the link I provided that did not work for you?

  4. Mark avatar

    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?


    1. Bharat Karavadra avatar

      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.
      If it is something else that you want then please clarify.

Leave a Reply

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