Image block stretched to full height hero section

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 :

#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 ;
}

Hey @Soona  Can you share your website URL

Oh so sorry, I though I did ! Here you go : https://goldensoulholistics.com/home-new

Can you send png image?