Increase Header Image Height

This topic has 5 replies, 4 voices, and was last updated 7 years, 10 months ago by itsamiro.

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

Author

Posts
December 25, 2016 at 1:33 am #105862

itsamiro
Participant

Hi –

I’m looking to increase the height of the header image – what’s the best way to make that change? I saw the option in the “custom header php” file, but it didn’t increase the size of the image as it suggests.

Thanks.

December 25, 2016 at 7:11 pm #105880

Pratik
Participant

Hi @itsamiro,
If you use skip cropping option when uploading header image, the uploaded size will be used.

Is this what you wanted?

Regards,
Pratik

December 26, 2016 at 7:10 pm #105907

Dilara
Participant

Hi @Pratik @itsamiro,
I have the exact same issue. Skipping cropping didn’t change anything.
Thanks.

December 26, 2016 at 11:52 pm #105912

itsamiro
Participant

@Dilara is correct, @pratik, – skipping the cropping option doesn’t change the height of the header image – it’s still set to a height of 720.

I tried adjusting that size restriction in the custom header php file, and that allows me to upload an image with a larger height, but it still shows up as 720 on the site.

December 27, 2016 at 9:48 am #105929
Mahesh
Participant
@itsamiro:

@dilara: Skip cropping is working fine. If you select skip cropping option, it uses the full image without cropping. Please check the header image as you’ve uploaded (@itsamiro) in the link below:
http://bit.ly/2ic4kxc
This is the image being used. And as you can see the full image, skipping working fine.
But the reason that full image is not displaying is that the header image is used as the background. And if not content, it’ll just take the height of the content and the padding for course.
The solution for this is to simply increase the height with Custom CSS of the container to fit the image. And the height required to be adjust as per your screen size.
Please add the following CSS:
```
@media screen and (min-width: 1200px){
    #header-featured-image .hentry {
	height: 500px;
    }
}
```
Hope you understand.

Regards,
Mahesh
December 29, 2016 at 3:09 am #106035

itsamiro
Participant

Thanks.
Author

Posts