background-attachment: fixed for children whose parent is position: fixed

Question

Essentially, I'm trying to add a list of four buttons/links fixed to the centre of the left side of the page. However, I'm trying to apply the same, single background across the elements using background-attachment: fixed;.

Here is a brief example; I'm trying to have the wavey background visible only inside the red lines:

Here is what I currently have (where #social-media is the parent and .social-media-button is for the children):

#social-media {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: fit-content;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.social-media-button {
    width: 200px;
    height: 80px;
    margin: 10px;
    /* border: solid red 4px; */
    border-radius: 15px;
    
    background: var(--wave-url); /* --wave-url is just url("path/to/image") */
    background-attachment: fixed;
    background-size: 220px 400px;
    /* background-position: center; */
    background-repeat: no-repeat;
}

... but it comes out like this:

I know that when the position of an element is set to something like fixed then it is no longer visible to its parent, so I can see why this would affect background-attachment: fixed; of the children. Is there a way around this, however?