Jump to content

Image block stretched to full height hero section

Recommended Posts

Hello there!

On my Homepage -> hero section,  I'm trying to add a .png image on top of my banner image, which has a parallax effect. I used the following code (beneath) so the .png image can go beneath the header and stretch to the full height of the section. The problem is, it works on the Squarespace preview mode, but the .png image does not appear on the online website. (check on the website link)  I don't know if this can help, but changing the section ID by '.hero-section.image-block' fix the problem of the .png appearing, but the code isn't applying anymore. Can you help? Thank you so much 

Here is a screenshot of the preview mode :

image.thumb.png.4f88d8036b1766081da6ef8aabd839ea.png

#block-yui_3_17_2_1_1720428605502_4457
.image-block {
  position: absolute;
  top: -100px ;
  bottom: 0;
  width: 100% ;
  height: 100vh ;
  object-fit: cover;
  
}

.hero-section .header {
  position: relative;
  z-index: 1 ;
}

Link to comment
  • Replies 3
  • Views 141
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.