The default Twenty Seventeen front page header image uses the full height of the screen except for the menu that appears underneath. This size of this header can be changed.
The default header image.
A reduced height header image.
The height of the header has been reduced by 50% in this example. Note that the header height includes the main navigation menu and so the image appears a little less than 50% in height.
Where and how to change the height of the header:
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
- The first section is for a computer / laptop screen.
- The second section is for a tablet or phone screen.
- The third is the same as the first but for logged in users where the WordPress admin bar.
The CSS code:
/*Computer screen */
@media screen and (min-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
height: 50vh;
}
}
/* Mobile screen*/
@media screen and (max-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header
{
/*display: table;*/
/*height: 300px;*/
/*height: 75vh;*/
height: 50vh;
/*width: 100%;*/
}
}
/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image, .admin-bar.twentyseventeen-front-page.has-header-image.home.blog .custom-header {
/*height: calc(100vh - 32px);*/
height: calc(50vh - 32px);
}
}
is it possible to make the are smaller without loosing parts of the header? i would like to be able to see the whole image but smaller, if possible?
thanks
Jamal,
The header will vary in size, shape and appearance depending on the screen resolution, browser windows size and device. The numerous combination of variations would require considerable custom coding. The advice I have given to other people who have had similar desires is that if the appearance of a level of control over the appearance of a header image is critical then try the WordPress.org plugin directory or perhaps another theme which allows more control over the header images.
Wonderful, at least, the header image is displayed at a correct size for mobiles, thank you so much Bharat !
hello,
i can’t log in order to access to the content, as my email address is rejected : ” Please enter a valid email address ”
(i’ve been trying gmail or hotmail.fr emails)
Audrey, Can you give me the name and email address that you are trying, so that I can enter them here?
I entered your first name and email address and it subscribed OK. You should receive an email from support@karavadra.net with further instructions. Check your spam folder if the email is not in your main inbox folder.
I have read several of your posts and you advise folks to go to Appearance->Edit CSS. My installation does not include that. It says Appearance->Editor and then it drops you into the Style.CSS. Can I just add your code snippets at the top of the Style.CSS? I have seen that others are confused by this also. Unfortunately, my manager does not allow me to share the login creds. I am a bit new to working with WP so appreciate your help.
Kathy,
Try Appearance -> Customise then Additional CSS at the bottom of the left menu. Enter the CSS code into the text area appears.
Entering the CSS into the style.css should work however if you are using only the parent theme then updates to the theme will override the changes, so use a child theme instead. See here for how to create a child theme: https://codex.wordpress.org/Child_Themes
Hello Bharat,
I tried this with no result at my site http://www.samuelskantz.se
I put the code in the Edit CSS-field, but nothing happened. Any ideas why?
Samuel,
Can you use the Help link on the top menu and send me an admin login so that I can look into it?
Hi Bharat,
Please forgive if this is a ‘stupid leek’, but does this code effectiveley ‘clip’ the image to the sizes entered in to the code?
If I needed the code to ‘scale’ the image to fit mobile devices how would this work?
I have a custom image for the Header, I’d like the same image fully available on Desktops and Mobile devices… am I missing something… sorry :0/
Hello,
The code does clip the image to the percentage height of the screen which is donated by the number before the ‘vh’
The section with the comment /* Mobile screen*/ creates the height of the header when viewed on mobiles.
I hope that helps.
This worked for the “computer screen” and “mobile” views, but it didn’t resize my “admin bar” view. I used 50vh for all 3 views. Any suggestions or insights? Thanks.
Moi,
I just re-tried the code and with the admin bar showing the header height on the home page, the header height on the front page does reduce. Can you use the help link on the top menu to send me your admin login details… so that I can look into it?
Hello, anybody a idea how can i make the videoheader appear on mobiles? itskharizldalodo.com. Thank you very much from Germany.
Hiya – I’d like the top of the image to align to the top of the page – on the home page it seems to be aliged differently to the rest of the pages – do you have any idea how I can make sure the header image aligns to the top of the page?
Bertie,
The home page here https://tryit.tv/twentyseventeen/ has a header image where the top of the image is at the top of the page, and here https://tryit.tv/twentyseventeen/html-elements/ is a page where the top of the header image is not at the top of the page (see position of the balloons). Can you send you the URL of your site so that I can see your installation?
http://curtain.m6way.co.uk and http://curtain.m6way.co.uk/?page_id=12 thanks so much
Bertie,
The following CSS should align as the home page but the height of the header may have to be increased, or the image re-designed:
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {position: fixed;
}
thanks so much
Bertie,
I’m glad that worked for you.
Just a heads-up for others here… I used the CSS from this post to reduce the height of my 2017 header image… it worked great! Then two days later, I started having problems with the header image on ALL pages… after a refresh, I’d get a huge white space beneath the header image the size of the original full page image. It turned out to be a conflict caused by a plugin… Above The Fold Optimization by PageSpeed.pro… The problem was NOT the CSS provided by Bharat… it was the plugin. Thanks, Bharat!
Doc,
Thank you for the information and I am glad that my code works OK.
If you like to close the information like this, you’d better not. You are pushing people’s personal information open. And because of you article occupies the google search, people can’t access the appropriate information.
Hello wonho,
I do not understand your comment. Can you please clarify?
However, with my interpretation, personal information here is posted by users themselves in the comments section. I mention people’s names in my replies to these comments as I prefer to address people by their name.
As it says on the posts, the customisation instructions are for subscribers.
Hi, how can you set the same header size on all other pages? Because by default when switching to another page other than “home”, the header is reduced too and the change is not very aesthetic.
Thanks in advance
Hello Paula,
Try this: https://karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/#comment-265
Thank you, its ok. The only problem is that the image changes from start to other pages.
In these pictures I show you the example.
Home page:
https://tlgur.com/d/x4rjlpz4
Other page:
https://tlgur.com/d/Y8njDAY8
Hello Paula,
Can you use the ‘Ask For Help’ link on the top menu to send the precise code you are using for both the home page header and for the other pages, and also the URL to your site?
Hello Bharat, Thanks for posting this, it’s extremely useful. However, I have the exact same issue as Paula. I use the code you provide above to reduce the size of the header on the front page. I have not modified the code for the other pages, which means I use the theme’s standard code. I will send you the url of my site via the ‘Ask for help’ link. I hope you can help! Many thanks.
Hello Astrid,
See this: https://karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/#comment-265
Hello Bharat, thanks for answering so quickly. However, your suggestion does not solve my issue: by changing the padding, your above suggestion moves the name of the website about on the header image, but it does not make the header image of the front page the same size as on other pages, nor does it mage the image look exactly the same on the front page as it does on the other pages: the part of the image visible on the front page appears to be cropped and ‘zoomed’ (enlarged) differently than on the other pages.
To be honest, all I’d like to do is to be able to use exactly the same template for the front page as for the other pages, I don’t want the front page to look different. Thanks.
Astrid,
The code for the header of the main front page is different to that of other pages and posts. It’s too different for me to create a quick customisation at the moment but I will look at it when I have a quality moment. In the meantime, can you try posting your requirement on the Twenty Seventeen support forum here: https://wordpress.org/support/theme/twentyseventeen/
If you get a reply that works, can you post it here so that others can use it?
Hello, thanks for this suggestion. And yes, will do.
Hi Bharat,
Thanks for your site – I’ve found a lot of useful info to help me with my Twenty-Seventeen customisation.
I do, however, have a question. In fact, it’s virtually the opposite of Andreas Anderson’s question of 15 Feb 2017. So far I’ve successfully removed the Front page sections on my customised Twenty Seventeen “child” as I didn’t want them. What I’d like to do now is make all pages on the site look like the “static” Home page. I.e. transparent background with a semi-transparent “content-area” so the background image is fully visible as it is on the home page. Is this possible? Thanks for your advice.
Hello Alan,
Can you clarify how you are setting the transparency and background image that you are referring to?.., and/or send me URLs with descriptions so that I can look at what you are referring to?
Thank you.
Hi Bharat,
With Twenty Seventeen out of the box the home (front) page has a white background menu some way down the page with the background image fully visible above the menu. Below the menu the “content area” has a semi-transparent background with black (or near black) text. On all “non-home” pages the white background menu is considerably higher up the page with only a relatively small portion of the background image visible. The “content area” on these other pages (i.e. all pages except for the home page) has a solid gray background with black text. I have tried, but have been unable to target this background in the css to make it semi-transparent like the home page is. Can you assist? I.e. by providing the location in the style.css file that refers to the background color/transparency for all non-home pages.
Thanks, Alan.
Hello Alan,
I started with a development version of the theme which I customised, then installed the released version but keeping the customizations, and so I have not experienced the out of the box theme. However, this http://2017.wordpress.net/ may be the default theme. If it is then the home page has the content “Welcome to Needle & Hook Coffeehouse!” under the menu but can you clarify what you are referring to when you mention the semi-transparent area?
Now, for non-home pages see http://2017.wordpress.net/contact/, and again, can you clarify what you are referring to when you mention the solid grey background area?
Apologies for the confusion. As mentioned earlier, one of the first things I did was to remove the front page sections on the site I am setting up for a friend. The url is: http://www.lenkawagner.com. As a result I ended up with the front (home page) at the url provided. If you look at any of the other pages you will see a white background below the menu with a “gray” content area. I would like all the non-home pages to look like the home page. I.e. fully transparent background below the menu, with a semi-transparent content area. It is probably something as simple as finding the correct background css elements for the non-home pages in the style.css file. Now you have the url hopefully you understand what I am asking. Thanks.
Hello Alan,
I can see what you are referring to now, but I am confused as to how these grey areas have been created. I cannot find a setting in the theme to do this. Have you created these grey areas?
If not, then can you send me the admin URL, username and password, suing the ‘Ask For Help’ link on the top menu, and I can look into it?
Thank you very much for the info! However I was wondering if you have any tips as to how one would make the front pages header (and img) look just like the other pages?
In the front page the custom-header-media uses position attribute “relative” but the rest of the pages has the “absolute” property.
What I’m most interested in is finding out is how to edit the PHP in order to make the static front page a “regular” page
Would appreciate your response a lot!
Hello Andreas, can you send me two URLs. 1) of a front page with a static page and 2) of a normal page? Let me know what the difference is and how you want them to be the same. You can use the Ask For Help link on the top menu.
Hi Bharat, thanks for the code! Is there a way to also change the sizes of the large headers underneath the main header in the front page? I’m in static page and have three header sections on my front page that I’d like to be the same size. Thanks!
jkyates.com
Hello Josh,
The panel images on the home page can be reduced in size. See here: https://karavadra.net/reduce-size-front-page-panels-twenty-seventeen-theme/
Hello Bharat, your code worked wonders. I also tried out different percentages (50% and 75%, as I’m a total novice in installing & using WordPress) to have different heights, However I wanted to ask you one more thing…I would love to reduce the space that WordPress 4.7 provides for the header image. Example…actual reccomended image size (and space, I guess) is 2000 x 1200 pixel. I would love to have 2000 x 900 or 800 pixel. In that case I must change the code inside the .php files or what? Thanks in advance for your reply, bye.
Hello,
Someone else asked a similar question and I suggested to simply create your image at 2000 pixels wide and then whatever height you want, and then locate it at the top of a blank canvas of 2000 pixels x 1200 pixels. This way you are still using an image fo 2000×1200 but your image resides only at the top with a blank canvas underneath.
Thanks for your reply, Bharat. As we’re talking about the header image…is there the possibility to add a slider (and display multiple images) to this theme in the header section?
Hello,
That would be more than any customisation I can do here. Can you look through the plugin directory here https://wordpress.org/plugins/ to see if there is a plugin that can replace the header on WordPress themes?
Hi Bharart,
this doesnt work for me. I already have headaches because of a day spend trying to figure out how to reduce the height of the home page header image. Can you please help me ? The code u provide has no effect in default (20-17) theme style.css, nor in its child theme style.css. What I could have been missing ?
Thanks in advance for any help
Hello Jan, I had a look at your site and the header is reduced and it seems you have resolved the issue. If not, use the ‘Ask For Help’ link at the top of the page to send me the admin URL, username and password, so that I can look into it.
Hi Bharat,
yes, I finally resolved it, thank you for your reply and for sharing your knowledge.
Have a nice day
Sir,
Thanks for your work but if i have one query. if I use a header of one third height i.e. 400 px or whatever height is set then it should display the image but it first expand it to 1200 px then display the one third of that image which do not serve the purpose of reduced height.
Thanks & Regards,
Hello Maria,
Can you send me the URL of where you are having the issue?
Sir Bharat, sorry i’m working on localhost as i have just started work. I have deployed wordpress 4.7.1 … latest theme and write your code in custom css … it has reduced the height overall height but complete image is not appeared. If I load an image of smaller height i.e. around 400 px then it should display the image as it is but it first expand the 400 px image to 1200 px and then display the upper one third of the image. I just want to show the smaller height image as it is as on standard websites. Thanks & Regards,
Hello Maria,
I believe I know what you mean and I am not yet sure where this setting is coded. In the meantime, can you try simply putting your desired image on a canvas size of 2000×1200 pixels, so that it fits the whole 2000px width and is at the top of the canvas?
oooh yes … gr8 idea … entire canvas of 1200 pixel ? …. top 400 on my actual image and remaining is empty … thanks sir … let me try what it does … one more thing sir … what should i do if what to other featured on other section of home page … as on all other section wordpress using the same 1200 height … can i use 400 pixel image there as height of those images are same as 1200 px even after using your code … thank you very much sir for your sharing …
Maria,
Can you clarify your message?
Hello all,
The code has been updated now so that it works when you have the static front page set as “Your latest posts”, and also when it is set as “A static page”.
The setting is in In WordPress Admin > Appearance > Customise > Static Front Page.
Hi Bharat, I have followed the steps, but has no luck. Also put the code on the child theme, still no luck. What did I miss? Thank you.
Hello Agus,
Use the Ask For Help link on the top menu and send me your WordPress admin login url, username and password and I can look into it.
Code works great, only I’ve just noticed that when I access site by mobile and start scrolling down the homepage, the header image somehow gets a little bigger, as it was automatically resizing on my scrolling down. In my opinion, this interferes a bit with the smoothness of user navigation. However, this is just a minor issue, so thank you again.
I just tested the header image with and without the code and it get’s slightly bigger with the default Twenty Seventeen settings. This seems to a an issue with the theme itself. I have tried it on an Android phone using chrome. It would be good to see how it performs on different OS’s and browsers. Please let us know here.
Works great! Thank you! That was exactly what I was looking for, though I was not able how to code it myself. Just one thing: does “Computer screen with logged in user and admin bar showing on front end” refers at what I see when I log in as wp-admin?
Yes, the third section is for logged in users looking at the site.
Is it possible to get the code working also on the mainpage? Actually it only resize the header on a singlepost/page.
Hello Bastian,
The code above is for resizing the header on main front page.
Hi Bharat, sorry for my late reply. For me this code does not have any effect. I’ve created a child theme, and put your css code into the child style.css (here: http://schwabenpilot.de/). Maybe you can have a look at my side and tell me what i have to do?
Hello Bastian, try putting the code into WordPress Admin > Appearance > Edit CSS. and then save and publish that.
If that does not work then use the ask for help link on the top menu to send me your WordPress admin url, the admin username and password, and I can look into it.
Hi Bharat, i created a blank WordPress installation (4.7.1) and entered the code via the Customizer. Even here it does not work. The header of the start page is always 100%. Can you check that on this way also briefly?
Hello Bastian,
Can you use the Ask For Help link at the top of the page to send me your WordPress admin url, the admin username and password.
Hi Bharat. Could you explain how to change the headers height on pages? It’s a quite extreme landscape format and difficult to place images. I’d like to increase the height. Thnx and Best from Berlin.
Hello tiborbogun,
The following CSS allows you to change the padding above and below the logo, title and description in the header. The values of the padding are in pixels.
/* for mobiles */
.site-branding {
padding: 100px 0;
}
/* for larger laptop and computer screens */
@media screen and (min-width: 48em) {
.site-branding {
padding: 200px 0;
}
}
Please note that the padding is also applied to the front page, and lower values will not effect the height of the image section on the front page. I will look into only applying the padding to single posts and pages when I have a moment.
Hi,
I tried with no result, but is this works with video header too ?
Hello Martial,
I tried the again and it works here. If you use the Ask For Help at the bottom (now at the top) of the page and send your WP-ADMIN login details then I can look into it for you.
And yes, the code also works with the video header.
Thanks Bharat…worked great …appreciate this share.
To get video headers to reduce in size, first ensure that you have a header image set. The video will override the image and the code will work.
Thanks a lot for your help, that works well :))
I went to style.css and was unable to find where any of that code is. What section was it in? Or what section should I be adding it to? Should I be adding it to a new file? Am I totally missing something. Can this be done on my own private site? Please Advise…Thanks
Hello,
You sent a similar question about a week ago. See above where it says…
In WordPress Admin > Appearance > Edit CSS.
That is where the code is added.
I like this theme, but I hate the way that if makes the featured image to large above the fold. Other than going through every single post and resizing the image, is there a way of making it less tall automatically?
Hello Dick,
You can reduce the height of the image by a percentage of the height of the screen it is being viewed on. See the link below.
https://karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/
Absolute legend. Thank you very much. Just what I was looking for.