Footer custom border

Site URL: https://www.altairdev.top/

I want to add a wavy border to my footer, the code I am trying to use is

But whenever I use it the Footer just disappears
 

#footer-sections {
    background: black;
      overflow: visible;
      background: hsl(204, 16%, 65%);
      background-size: 105% auto;
      background-image: url("https://auxetite-cdn.sirv.com/wavy-blurple-by-nouridio.svg") !important;
    background-color: black;
    content: '';
    width: 100%;
    height: 25%;
    bottom: 0;
    left: 0;
    position: absolute;

Try new code, replace with your image url

footer.sections {position: relative;}
footer.sections:before {
    content: "";
    display: block;
    background: black;
    overflow: visible;
    background: hsl(204, 16%, 65%);
    background-size: 105% auto;
    background-image: url(https://cdn.pixabay.com/photo/2020/12/10/10/17/jasper-national-park-5819878__340.jpg);
    background-color: transparent;
    content: '';
    width: 100%;
    height: 25px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 999;
}

@tuanphan Hey there! Found this thread while searching for an answer. I can't seem to get this to work for 7.1. I'd love to use an image as a top border for my client's footer. Any insight or guidance you can provide would be great. TIA!

Site: https://schulz-celebrity-golf-classic.squarespace.com
PW: snoopy

Image I'd like to use: https://images.squarespace-cdn.com/content/6554f93572c370332e59a9a0/0076b61b-a133-4f36-b2e7-ad8496b62727/peanuts-grass-100px.png?content-type=image%2Fpng

@LemonstrikeCreativeStudios For your site, you can use the following CSS:
 

/* Ensure fixed header is above everyhting  */
#header {
    z-index: 20
}

/* Add image to the top of footer section */
#footer-sections { position: relative; z-index: 10; }
#footer-sections:before {
    content: '';
    display: block;
    background-size: cover;
    background-image: url(https://images.squarespace-cdn.com/content/6554f93572c370332e59a9a0/0076b61b-a133-4f36-b2e7-ad8496b62727/peanuts-grass-100px.png?content-type=image%2Fpng);
    width: 100%;
    height: 40px;
    top: -20px;
    left: 0;
    position: absolute;
    z-index: 10;
}

4 minutes ago, jpeter said:

@LemonstrikeCreativeStudios For your site, you can use the following CSS:
 

/* Ensure fixed header is above everyhting  */
#header {
    z-index: 20
}

/* Add image to the top of footer section */
#footer-sections { position: relative; z-index: 10; }
#footer-sections:before {
    content: '';
    display: block;
    background-size: cover;
    background-image: url(https://images.squarespace-cdn.com/content/6554f93572c370332e59a9a0/0076b61b-a133-4f36-b2e7-ad8496b62727/peanuts-grass-100px.png?content-type=image%2Fpng);
    width: 100%;
    height: 40px;
    top: -20px;
    left: 0;
    position: absolute;
    z-index: 10;
}

 

@jpeter THANK YOU! I think caching is preventing me from seeing it in my working browser, but I can see it in incognito and it looks fantastic. Thanks again for the assist 🙂