Use CSS custom property within url data type

Question

I have a custom property --src: 'http://via.placeholder.com/100x100' which I would like to insert into a url() of a background image.

I thought that something like this would work ...

.custom {
  --image: 'http://via.placeholder.com/100x100';
  width: 100px;
  height: 100px;
  background-image: url(var(--src));
}

but it doesn't.

.custom {
  --image: 'http://via.placeholder.com/100x100';
  width: 100px;
  height: 100px;
   /*  background-image: url('http://via.placeholder.com/100x100');it should look like this */
  background-image: url(var(--image)); /* this doesn't work */
  
}

<div class="custom" style="--image:'http://via.placeholder.com/100x100';">hello</div>

I skimmed through the spec on url() and custom properties, but couldn't find anything which says that url() doesn't support custom properties.

Just to add some context as to why I'm trying to this:

I was trying to add the background-image in a pseudo-element to save the extra element. (It doesn't work)

div:before {
  content: var(--image); /* this works */
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(var(--image)); /* this doesn't */
}

<div style="--image:'http://via.placeholder.com/100x100';"></div>

So is this possible, or am i missing something?