[Hösli]

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.

[Mahesh]

@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

[Hösli]

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

[Mahesh]

@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

[Author]

Posts