<script>
document.addEventListener("DOMContentLoaded", function() {
  const backgroundImage = document.getElementById('backgroundImage');
  const blurSlider = document.getElementById('blurSlider');

  blurSlider.addEventListener('input', function() {
    const blurValue = this.value;
    backgroundImage.style.filter = `blur(${blurValue}px)`;
    backgroundImage.style.display = 'block';
  });

  // Simplify the example for loading images and applying backgrounds
  // Implement fetching and event handling for portraits and backgrounds
});
</script>