Responsive Background Image Section

<div class="w-full">
  <div class="w-full min-h-screen bg-cover bg-center bg-no-repeat relative" style="background-image: url('https://delflo.com/wp-content/uploads/2022/03/delflo-battleship.jpg');" data-thumb="https://delflo.com/wp-content/uploads/2022/03/delflo-battleship-736x414.jpg" data-desktop="https://delflo.com/wp-content/uploads/2022/03/delflo-battleship.jpg" data-tablet="https://delflo.com/wp-content/uploads/2022/03/delflo-battleship-1024x768.jpg" data-mobile="https://delflo.com/wp-content/uploads/2022/03/delflo-battleship-736x414.jpg"></div>
  <script>(function() {
      const bgSection = document.currentScript.previousElementSibling;
      
      function updateBackground() {
        const width = window.innerWidth;
        let imageUrl;
        
        if (width < 768) {
          imageUrl = bgSection.getAttribute('data-mobile');
        } else if (width < 1024) {
          imageUrl = bgSection.getAttribute('data-tablet');
        } else {
          imageUrl = bgSection.getAttribute('data-desktop');
        }
        
        if (imageUrl) {
          bgSection.style.backgroundImage = `url('${imageUrl}')`;
        }
      }
      
      updateBackground();
      window.addEventListener('resize', updateBackground);
    })();</script>
</div>