Custom overlay on website

Site URL: https://www.lumieredelune.online

I'm building my website .

I need help with adding a fixed vertical text png (overlay) on the side of my website that does not scroll. The code and png I used is down below. It works fine in the squarespace mobile and desktop view. The problem is that it does not translate to the phones and it scrolls (mostly iphones). Also, instead of it being an overlay, it pushes some of the sections to the left. Please Help, it would be very much appreciated. 

Password: imaCunuK14DeLune

// Side bar image //

body {
    background: top right fixed no-repeat url(https://static1.squarespace.com/static/601a332ca1a4280a885b48d4/t/6056ba6b0af9103c1f6f46fd/1616296555244/sidebar.png); 
    background-size: 25px auto; 
    padding-right: 19.9px;
}