// Convert image file to Data URI and apply as background
const fileInput = document.querySelector('#imageInput');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const dataUri = event.target.result;
    // Apply as background image
    document.body.style.backgroundImage = `url('${dataUri}')`;
  };

  reader.readAsDataURL(file);
});

.logo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS...');
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 100px;
}

/* Alternative: Using shorthand */
.icon {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxuc...')
    no-repeat center center;
  background-size: 24px 24px;
}

.decorative-element::before {
  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...');
  display: inline-block;
  margin-right: 8px;
}

.custom-bullet::before {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANS...');
  position: absolute;
  left: 0;
  top: 4px;
}

<!-- Using Data URI in img src -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..."
  alt="Logo"
  width="200"
  height="100"
/>

<!-- Using in srcset for responsive images -->
<img
  srcset="data:image/webp;base64,UklGRiQAAABXRUJQVl... 1x,
          data:image/webp;base64,UklGRkQAAABXRUJQVl... 2x"
  alt="Responsive icon"
/>