Float Footer above Body Content / Extend Body Content Behind Footer

https://dolphin-octopus-74wh.squarespace.com/
Site Password: test123

I have set background of my site footer as an image. The image is a PNG with transparency. I am trying to find a way to get the body content to flow behind/below the footer, so it looks like paper laying on top. The site header looks the way I want it. 

I am open to hiding the footer on this page and building out a new one in a new section. This wont be a problem on other pages as the body background will be white. 

I am not looking for a fixed footer -- it can scroll with the rest of the page. I just want to get rid of this annoying white background!

First, edit the image >> Make white to transparent

Next, add this to Design > Custom CSS

section[data-section-id="63da9ac6c9844e3c54f8ac1a"] .section-background {
    top: -20px;
    z-index: 9999999999;
}
footer.sections, footer.sections section {
    z-index: 9999999 !important;
}

6 hours ago, tuanphan said:

First, edit the image >> Make white to transparent

Next, add this to Design > Custom CSS

section[data-section-id="63da9ac6c9844e3c54f8ac1a"] .section-background {
    top: -20px;
    z-index: 9999999999;
}
footer.sections, footer.sections section {
    z-index: 9999999 !important;
}

 

Thanks for the suggestions, but this didn't fix the issue. I confirmed the PNG is transparent. The footer section itself is putting the white behind the image. The code did move the top of the section as planned. 

For reference, here is everything affecting the footer right now: 

section[data-section-id="63da9ac6c9844e3c54f8ac1a"] .section-background {
	background-image:url(https://static1.squarespace.com/static/63da9ac5c9844e3c54f8abd2/t/63dab0b2d42a55638eef30bf/1675276470305/Raven+Flower+Torn+Paper+2.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: top;
	top: -20px;
	z-index: 9999999999;
} 

footer.sections, footer.sections section {
	z-index: 9999999 !important;
}