Custom Section Divider

Site URL: https://bdgphysio.squarespace.com/

Hello SS Experts 

I added a custom section divider and experiencing 2 issues:

1. On desktop, there is a very fine line that appears between my PNG and my section. Is this due to my PNG or my code?
2. On mobile, the PNG looks very blurry 
   
   This is the code I used: 
    

//wave section banner//
#home-3-3 {
   background-color: #BDBDDF;
   overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100px;
    background-image: url(https://static1.squarespace.com/static/620d93708af3d17e8a89018c/t/622a90a511f12b1103f6a571/1646956709265/banner.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    position: absolute;
    margin-top: -100px;
    z-index: 1; 
    background-size: 100% 100%;  
  }
}

Any insight would be appreciated! 

Site URL: https://bdgphysio.squarespace.com/
PW: enter

It looks fine to me