Как поместить изображение в другое изображение на кнопку click в JavaScript

Question

У меня есть класс boxright с фоновым изображением cave

У меня есть кнопка, которая при нажатии указывает на функцию ontop(), которая сбрасывает фоновое изображение boxright на изображениеcheetah

я хочу, чтобы гепард появлялся наверху пещеры, т. Е. При нажатии кнопки я хочу, чтобы гепард появлялся внутри пещеры

Как этого добиться?

function ontop()
{
var d=document.getElementById('a').style.backgroundImage="url(https://i.ibb.co/0DvMRj4/wcheetah.png)";
console.log(d);
}

.boxright {
  position: absolute;
  top: 48.3vh;
  left: 50.98vw;
  
  width: 14.0vw;
  height: 40.0vh;
  
  cursor:pointer;
  border:2px solid black;
  background-image:url(https://i.ibb.co/cYnc1Ky/kisspng-cave-euclidean-vector-illustration-vector-cave-5a7a360b205458-5617697615179586671324.png);
  background-repeat:no-repeat;
  background-size:cover;
  
  }

<div class="boxright" id="a"></div>
<button onclick="ontop();">place another image indide cave</button>

Answer 1

при клике добавить класс к div, который в css добавляет псевдоэлемент с изображением

function ontop()
{
   document.getElementById('a').classList.add('cheeteh');
}

.boxright {
  position: absolute;
  top: 48.3vh;
  left: 50.98vw;
  width: 14.0vw;
  height: 40.0vh;
  cursor:pointer;
  border:2px solid black;
  background-image:url(https://i.ibb.co/cYnc1Ky/kisspng-cave-euclidean-vector-illustration-vector-cave-5a7a360b205458-5617697615179586671324.png);
  background-repeat:no-repeat;
  background-size:cover;
  
  }
  .cheeteh:after{
    content: "";
    position: absolute;
    top: 50%;
    background-image: url(https://i.ibb.co/0DvMRj4/wcheetah.png);
    z-index: 4;
    width: 50%;
    height: 50%;
    background-size: 100% 100%;
  }
  

<div class="boxright" id="a"></div>
<button onclick="ontop();">place another image on top</button>