Different size of header pictures for other pages except front page

This topic has 3 replies, 2 voices, and was last updated 8 years, 6 months ago by Mahesh.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
April 29, 2016 at 11:35 am #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.

April 29, 2016 at 1:40 pm #90678
Mahesh
Participant
@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
April 30, 2016 at 2:06 am #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

May 3, 2016 at 10:44 am #90901
Mahesh
Participant
@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