JSFiddle - React, Tailwind, and code Playground

HTML

<main class="">
  <div>
    <h2>My title</h2>
  </div>
  <button>Apply magic !</button>
</main>

CSS

html,
body, main {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

main {
  display: inline-block;
  text-align: center;
}

div {
  background: #F7F8F9;
  height: 100px;
  width: 100%;
  margin: 4rem 0;
}

.bg-img {
  background: url("https://www.transparenttextures.com/patterns/beige-paper.png");
}

JavaScript

const mainEl = document.getElementsByTagName("main").item(0)
const btnEl = document.getElementsByTagName("button").item(0)

btnEl.addEventListener("click", function toggleMagic() {
  mainEl.classList.toggle("bg-img")
})