Resp. background images via custom properties

by phloe

HTML

<div class="bg" style="
  --bg-color: red;
  --bg-mobile: url('https://via.placeholder.com/400x600');
  --bg-desktop: url('https://via.placeholder.com/1200x800');
" />

CSS

.bg {
  background: var(--bg-color, transparent) none no-repeat;
  background-image: var(--bg-mobile, var(--bg-desktop, none));
  min-height: 50vh;
}

@media (min-width: 400px) {
  .bg {
    background-image: var(--bg-desktop, var(--bg-mobile, none));
  }
}