Resize section background image on scroll

Site URL: https://endive-denim-89ds.squarespace.com/hotel-de-syeres

https://endive-denim-89ds.squarespace.com/hotel-de-syeres

pw: 1404-Hello

Hello, I would like to know if it's possible to resize the first section background on scroll for mobiles? The image takes 100% viewport height on page load, but it crops a lot of the picture. The user should be able to view the full picture when he/she scrolls. 

Can it shrink on scroll to something like 20vh?

Please advise,

Many thanks!

34 minutes ago, TOMweb said:

Site URL: https://endive-denim-89ds.squarespace.com/hotel-de-syeres

https://endive-denim-89ds.squarespace.com/hotel-de-syeres

pw: 1404-Hello

 

Hello, I would like to know if it's possible to resize the first section background on scroll for mobiles? The image takes 100% viewport height on page load, but it crops a lot of the picture. The user should be able to view the full picture when he/she scrolls. 

Can it shrink on scroll to something like 20vh?

 

Please advise,

 

Many thanks!

When scroll down the header will  has a .shrink class, we can take advantage of it

@media only screen and (max-width: 600px) {
    .shrink + #page section[data-section-id="5f75a22fcd2d631e090303ff"] .section-background img {
          height: 50% !important;
          top: 20%;
          position: relative;
      }
      #page section[data-section-id="5f75a22fcd2d631e090303ff"] .section-background img {
          transition: all 0.5s;
      }
}

Thank you @bangank36!

is there a way to shrink the section height as well? I have now a huge gap between the image and the next section block...

4 hours ago, TOMweb said:

Thank you @bangank36!

is there a way to shrink the section height as well? I have now a huge gap between the image and the next section block...

.shrink + #page section[data-section-id="5f75a22fcd2d631e090303ff"] .section-background img {
    height: 50% !important;
    top: 50%;
    position: relative;
}
.shrink + #page section[data-section-id="5f75a22fcd2d631e090303ff"] {
  min-height: 50vh !important;
}
#page section[data-section-id="5f75a22fcd2d631e090303ff"] .section-background img {
    transition: all 0.5s;
}

Awesome, I can work with that!!! Thank you! 🙏 ☺️ 

One last thing... Is there a way to ease the transition when we scroll back up? It just "pops" bigger now.

@bangank36 Any idea how to smoothly de-shrink this section when we scroll back up? Many thanks for your help.

4 hours ago, TOMweb said:

@bangank36 Any idea how to smoothly de-shrink this section when we scroll back up? Many thanks for your help.

I have no idea, sorry

Okay, thank you so much for your help so far, it worked so well!