HTML 2D Scrolling Background

Here we scroll over an image of the Mona Lisa in two dimensions.

 <div style="
      background-position: 0px
      width: 200px;
      height: 200px;      
      background-image: url('/scrolling-background.png');            
      /* The next bit of style just places our dude 
           in the center bottom of the BG */
      display: grid;
      place-content: end center;
  ">
      <div id="dude">
        <!-- See sprite demo for details on how this dude works -->
      </div>
  </div>

The red box represents the "window" we are showing in our animation.