Apply image or gradient as background

HTML

<div class="bg-img" style="--background: url('https://miro.medium.com/v2/resize:fit:596/format:webp/0*XUWl7XWaCEXYETfu')">
  <img src="https://miro.medium.com/v2/resize:fit:596/format:webp/0*XUWl7XWaCEXYETfu" alt="">
</div>

<hr>

<div class="bg-img" style="--background: url('https://mdn.github.io/beginner-html-site-scripted/images/firefox-icon.png')">
  <img src="https://mdn.github.io/beginner-html-site-scripted/images/firefox-icon.png" alt="">
</div>

<hr>

<div class="bg-img" style="--background: url('https://picsum.photos/id/237/200/300')">
  <img src="https://picsum.photos/id/237/200/300" alt="">
</div>

CSS

.bg-img {
  position: relative;
  width: 500px;
  height: 400px;
  overflow: hidden;
}

.bg-img::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: var(--background);
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(50px);
  transform: scale(2);
}

.bg-img img {
  position: absolute;
  border: solid 1px red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}