JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<ul class="list" style="background-image: url(https://i.ibb.co/F6b7kdd/priroda-kartinki-foto-03.jpg)">
  <li class="item" data-image="https://i.ibb.co/F6b7kdd/priroda-kartinki-foto-03.jpg">1 item</li>
  <li class="item" data-image="https://i.ibb.co/fp5hpKy/shutterstock-1188663136-aerial-view-of-the-old-stone-bridge-in-klidonia-zagoria-in-the-autumn-epirus.jpg">2 item</li>
  <li class="item" data-image="https://i.ibb.co/j6fctq2/Priroda-derevo-trava-devushka-Depositphotos-850-d-850.jpg">3 item</li>
   <li class="item" data-image="https://bipbap.ru/wp-content/uploads/2017/04/3dr-19.jpg">4 item</li>
   
   
  
</ul>

CSS

.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-size: cover;
  /* min-height: 200px; */
}

.item {
  color: #000;
  margin-bottom: 20px;
}

JavaScript

var list = document.querySelector('.list');
list.addEventListener('click', function(event) {
  let elem = event.target;
  if (!elem.closest('li')) {
    return false;
  }

  let image = elem.dataset.image;
  list.style.backgroundImage = '';
  list.style.backgroundImage = `url(${image})`;
})