0

With the following HTML element

<div class="img" style="--img-name: 'mount-everest';"></div>

and the following styles:

.img {
  background: url('/images/' var(--img-name) '-desktop.jpg');
}

the background doesn't get applied. I thought I could expect it to, because this

.img::after {
  content: '/images/' var(--img-name) '-desktop.jpg';
}

does concatenate the strings with the custom prop & display the path onscreen.

Is there something I'm doing incorrectly or is what I'm trying to do not possible with CSS custom props?

chocojunkie
  • 479
  • 2
  • 8
  • 14
  • You could try `calc('/images/' + var(--img-name) + '-desktop.jpg')` but you're probably better off modifying the code that sets `--img-name` to set as many variables as you need. – Heretic Monkey Nov 07 '22 at 21:03

0 Answers0