header image sizing for all pages

  • How do I resize the header image on all but the home page. The home page displays a full image. All other pages display a small part of that image. I would like to display a full image on all pages.
    I selected an image in the Header Media option (no video). That full image appears on the Home page only.
    Another option would be to insert a second image on all but the home page. But again it should be the full image.
    Is there CSS that can be inserted into the Additional CSS box to do this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hello sailpilot,

    Add below css code into your current active child theme’s style.css file or you can add additional css option in theme customizer

    .custom-header {
    height: 710px !important;
}

    Hope this will helps you.

    Thanks.

    Thread Starter sailpilot

    (@sailpilot)

    Thanks but it doesn’t seem to do what we need. I need every page including the home page (which is static) to have the same header, same size and display correctly on all devices.

    With your suggested css change the size of the header is not the same on all pages, although it is larger on non-home pages.

    I can’t believe that this is so difficult to setup on this theme or am I missing something.

    The site which is in development is sunshinemusicduo.com

    Any help with this would be appreciated.

    Try this. Replace the 75vh with whatever height or pixel height (750px or whatever you need). Remember that twenty seventeen keeps the header the same height and crops to the center vertically, also crops out the sides on mobile screens (annoying!) so when you build your cover image keep it 1200 high but focus your content in the center bot vertically and horizontally:

    .custom-header-media img {
    height: 75vh !important;
    position: relative !important;
}
.custom-header {
    height: 75vh !important;
}

    This worked well for me, expect that the site title and tagline got shifted to the top of the image instead of its original placement near the bottom. I know I’ve dealt with this before but can’t find my notes. Anyone have the CSS to make the Twenty Seventeen Site Title stay in the same place? Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘header image sizing for all pages’ is closed to new replies.