Adapt header images and parallax effect with wide screens

Hello,

I built my website on a 13" screen. When I look at it from a bigger screen (for example 24"), I noticed the header image was getting bigger but not proportionally, the image is not full anymore, some parts are cut.
http://conscient.ch/ (the header image should appear full and aligned)

The other thing, the parallax images have also some trouble on bigger screens, the image is not centered anymore. I think I understand why, but I don’t see how to fix this…
example: http://conscient.ch/contact/manoir/ (the house should appear almost fully)

Can you help me to fix this please?
I wish you good day, thank you for your help.

Vichard

Dear Vichard,

Technically, that header image is a background which its size property is set to cover. Quoted from MDN article:

Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

It isn’t considered as an issue as it is designed that way. Though you can change it to contain, so that the entire image will be visible by applying the following CSS code:


#pg-35-0 .panel-row-style{
   background-size: contain !important;
}

But it will be resulting another problem, you will have huge top/bottom space on smaller screen as the container height is fixed.

I hope this clarifies things a bit. Thank you for your understanding.

Regards,
Kharis

Dear Kharis, thank you for your answer. I understood well what you said, indeed it clarifies things, either I keep this effect and the issue as well, either I need to change the design.
It applies for the parallax, but also for the header image of the frontpage right?

I wanted to try this CSS but nothing happened, should I change something in the code?

All the best,
Vichard

Just one thing, I fixed the Header image problem by putting a smaller image in a wider white page. So it is not cut anymore.

I wouldn’t mind trying the corrected CSS for the parallax effect however.

regards,
Victor

Try adding this custom CSS, please.


.header-image{
   background-attachment: fixed;
   background-position: center center;
}

Regards,
Kharis

Thank you Kharis