Jump to content

Resize section background image on scroll

Recommended Posts

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!

Link to comment
  • Replies 7
  • Views 816
  • Created
  • Last Reply
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;
      }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.