JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fon1" class="fon" data-class="n1">
  <img src="https://via.placeholder.com/300/F00/FFF" alt="текст">
</div>
<div id="fon2" class="fon" data-class="n2">
  <img src="https://via.placeholder.com/300/0F0/FFF" alt="текст">
</div>
<div id="fon3" class="fon" data-class="n3">
  <img src="https://via.placeholder.com/300/00F/FFF" alt="текст">
</div>
<div id="fon4" class="fon" data-class="n4">
  <img src="https://via.placeholder.com/300/FF0/FFF" alt="текст">
</div>

CSS

body {
  min-width: 640px;
  min-height: 480px;
}

.fon {
  width: 50px;
  height: 50px;
  border: 3px solid #FFF;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  margin: 10px;
}

body.n1 {+
  background-image: url("https://via.placeholder.com/300/F00/FFF");
}

body.n2 {
  background-image: url("https://via.placeholder.com/300/0F0/FFF");
}

body.n3 {
  background-image: url("https://via.placeholder.com/300/00F/FFF");
}

body.n4 {
  background-image: url("https://via.placeholder.com/300/FF0/FFF");
}

JavaScript

var backgroundClass = 'n1';
//* Сохранение выбранного фона в localStorage
function saveBackground() {
  localStorage.setItem("object", backgroundClass);
}
//* Чтение фона из localStorage и применение
function getBackground() {
  if (localStorage.getItem("object")) {
    backgroundClass = localStorage.getItem("object");
  }
  appendBackground();
}
//* Применение фона к body
function appendBackground() {
  document.body.className = backgroundClass;
}
getBackground();
//* обработка кликов по образцам
document.querySelectorAll('.fon').forEach(function(el) {
	el.addEventListener('click', function() {
  	backgroundClass = this.getAttribute('data-class');
  	saveBackground();
    appendBackground()
  });
});