How To Change The Twenty Seventeen Site Header Image

November 1, 2016

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:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

Share your thoughts

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

  1. 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. 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;
          }

  2. 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?

  3. 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

    1. 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.
      https://www.karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/
      If it is something else that you want then please clarify.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra