[Support request] Adjust header background image to screen width

[Ariel]

Hello,

I’m trying to automatically adjust a post featured image to the width of the screen.
After several hours scratching my head I’m looking for help.

So here is what I got so far : https://preprod.sophrologie-atelier-lille.com/yin-yoga/
And here is what I’m trying to get : https://sophrologie-atelier-lille.com/yin-yoga/

Any idea on how to do this ?
Ariel

[Ying]

Hi Ariel,

Based on your design, you don’t need to use the mergefeature of the header element, so choose no mergeinstead (under site header tab).

[Ariel]

Thanks for your reply, Ying !

Actually I did this. But then, I was stuck with this : https://preprod.sophrologie-atelier-lille.com/yin-yoga/

[Ying]

You can add more top and bottom padding for the page hero.

Currently there’s no padding’s set.

[Ariel]

Oh yes.

But I’m trying to automatically adjust the image to the screen width. As it is, I don’t find a way to adjust the witdh of the featured image to the width of the screen. Maybe it’s easy?

[Ying]

But I’m trying to automatically adjust the image to the screen width

The image is full width by default.

You just need to define its height by adding top/bottom padding.

[Ariel]

Hello Ying,

So is it possible to automaticcaly resize it to screen size? All my featured image aren’t the same size…

As it is, the image is cropped both in width and in height, as you can see by comparing the two link I provide in my first post.
Thank you for your help!

Ariel

[David]

Hi there,

try adding this CSS to your site:

.page-hero {
    min-height: 66vw;
    display: flex;
    align-items: center;
}

[Ariel]

Waouh thanks, David! It looks perfect on the page I was working.

But not on this one. Here is:
– What I get: https://preprod.sophrologie-atelier-lille.com/hatha-yoga/
– And what I’m looking for: https://sophrologie-atelier-lille.com/hatha-yoga/

Must I always use featured image of the same size?

You already helped me a lot!
Ariel

[Fernando]

Hi Ariel,

You can try setting the Background Position to center center or whichever suits you. Then, for the opacity of the image, you may set a Background Overlay with an opaque Background Color.

See: https://share.getcloudapp.com/RBumNp29

Lastly, you may also adjust the value of 66vw to your preference to make the image smaller a bit.

It would be ideal to use a similar sized Featured Image for coherency.

Hope this clarifies!

[Author]

Posts