Adjust header background image to screen width

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).

Thanks for your reply, Ying !

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

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

Currently there's no padding's set.

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?

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.

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

Hi there,

try adding this CSS to your site:

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

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

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!