show full image in page hero

Hi there,

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

Let me know :)

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

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.

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

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

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

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.