Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #90669
    Hösli
    Participant

    Hi

    It there a way to differentiate the header picture size from Frontpage to other pages. I liked to have on the frontage the recommend picture 1680×720. And on the other pages I like a header picture of 1680×360. Best case is for each page an individual header picture.
    Thank you.

    #90678
    Mahesh
    Keymaster

    @stefanhoesli: I’m afraid it is not possible to have image of different sizes as header image for front page and other individual pages. But you can have something similar to that with Custom CSS by limiting header-image content height to 320px. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

    .single #header-featured-image {
        height: 360px;
        overflow: hidden;
    }

    Note: This will cut off some bottom part of the image

    Regards,
    Mahesh

    #90731
    Hösli
    Participant

    Dear Mahesh

    Unfortunately this CSS code does not work.

    It seems that .single can not be interpreted for all pages except homepage.
    When entering the the code to CSS without .single, then the pictures are cut.

    Having an idea?

    Best regards
    Stefan

    #90901
    Mahesh
    Keymaster

    @stefanhoesli: For all pages including pages without .single, use the following CSS:

    body:not(.home) #header-featured-image {
        height: 360px;
        overflow: hidden;
    }

    And yes, some bottom portion of the image will cut off because of the CSS, I did mentioned this above. Since different size for header image for different pages is not possible. The images are of the full size of course, and the CSS show only image to the height of 360px as you’ve mentioned.
    Let me know further.

    Regards,
    Mahesh

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Different size of header pictures for other pages except front page’ is closed to new replies.