title: Is there a way to interpolate CSS variables with url()?
body: <p>I want to store my background URLs in custom properties (CSS variables) and use them with the background property. However, I couldn't find a way to interpolate the string when using it as a parameter in <code>url()</code>.</p>
  
  <p>Here is my sample code:</p>
  
  <pre><code>:root {
      --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
  }
  
  body {
      background: url(var(--url));
  }
  </code></pre>
  
  <p>I know that this can be easily done in Sass or LESS using the interpolation function but I'm curious if there is a way to do it without any pre-processor.</p>