I create some buttons, with images from a sprite to be used as the background for them. Each button is contained within its own <figure>. When the button is selected, the full size image from the Sprite should be displayed. The full size images are displayed correctly, but the thumbnail images on the buttons aren’t in the right positions.

Part of the Blue thumbnail appears with the Red shape thumbnail.
The rest of the Blue shape thumbnail appears where the full blue thumbnail should be, and the Green thumbnail is tacked onto it.
Nothing appears where the Green shape thumbnail should be.

This is what is displayed. enter image description here

Here’s the relevant part of my code. What am I doing wrong?

The CSS

#img1, #img2, #img3,
#thumb1, #thumb2, #thumb3 {
  background: url("colours-full.jpeg");
  background-repeat: no-repeat;
  object-fit: none;
}

#thumb1, #thumb2, #thumb3 {
  width: 30em;
  height: 30em;
  background-size: cover;
  float: left;
  margin-right: 1.5em;
}

#img1 {object-position: 0 0;
  width:  422px;
  height: 287px;
}
#thumb1 { background-position: 0 0; }

#img2 {object-position: -422px 0;
  width:  374px;
  height: 374px;
}
#thumb2 { background-position: -30em 0; }

#img3 {object-position: -796px 0;
  width:  151px;
  height: 560px;
}
#thumb3 { background-position: -60em 0; }

The button creation

function imgBtn (figNum) {
//  Insert a button with thumbnail image
    let html = '<button type="button" ' +
                       'id="thumb' + figNum +
                     '" onclick="showBigImg (' + figNum + ')"></button>';

    const figcap = document.getElementById("fig" + figNum).firstElementChild;
    figcap.insertAdjacentHTML ("afterend", html);  /* Append the button to 
                                                      the figcaption */
}