JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="a">broken</div>
<div id="b">works</div>
<div id="c">works</div>
<div id="d">works</div>

CSS

div {
  width: 100px;
  height: 100px;
  background: center center / contain;
  margin: 10px;
  border: 1px red dotted;
  display: inline-block;
}

div#a {
    --url: url(());
  background-image: var(--url);
}

div#b {
  background-image: var(());
}

div#c {
    --url: url("()");
  background-image: var(--url);
}
div#d {
    --url: url(\());
  background-image: var(--url);
}