{{ $images := slice }}
{{ range readDir "static/backgrounds" }}
  {{ if in .Name ".webp" }}
    {{ $images = $images | append .Name }}
  {{ end }}
{{ end }}

<div class="background-container">
  <img id="background-image" alt="Background" class="background-image">
  <script>
    const images = {{ $images }};
    const randomImage = images[Math.floor(Math.random() * images.length)];
    document.getElementById('background-image').src = `/backgrounds/${randomImage}`;
  </script>
</div>