[Support request] show full image in page hero

[eran]

Hi,
I made page hero to my home page but I don’t see the full image.
how can I fit the image to the page hero so it will display the full image + why the image is blurred when its in the page hero?

[Leo]

Hi there,

Does this help?
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eran]

Nope.
I want the page hero to stay the same height and won’t be blurred how can i do that?

[David]

Hi there,

you need to make the Page Heros aspect ratio match that of your original image.

1. Calculate your original images aspect ratio: Height / Width * 100 = Aspect Ration %.
Your example URL is: 1280 / 1920 * 100 = 67%.

2. Now you can add this CSS to make the page-hero match that ratio:

.page-hero {
    min-height: 67vw;
}

This will make it so 100% of the image is shown on any screensize.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eran]

It makes my page hero height very large.
how can i show the full picture but with small height?

[David]

The only way would be to NOT have the hero full width. You can’t have full width, full image and restrict the height…

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eran]

It still don’t show all the image if i put it on contained

[Fernando]

Hi Eran,

Try to upload an image with the same aspect-ratio as your page hero. Try an image with dimensions or aspect-ration of around 1143 x 279px.

[Author]

Posts