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