JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo"></div>

CSS

div.foo {
    background: red url(http://placekitten.com/50/100) no-repeat 50% 0;
    height: 100px;
    
    background-position: 0 0; /* Left aligned */
    background-position: 50% 0; /* Centered */
    background-position: 100% 0; /* Right aligned */
    
    background-position: -1% 0; /* Disappear to the left */
    background-position: 100% 0; /* Disappear to the left */
    
    /* Now - how do I calculate exactly how much either -1% or 101% need to be in order for the image to completely disappear (but NO MORE) */
}