title: CSS Variables with background-image url
body: <p>Am I misunderstanding the capabilities of css variables? I am trying to pass a background image url to a variable like this: It seems to be working fine when I pass something simple like a color etc...</p>
  
  <pre class="lang-css prettyprint-override"><code>:root {
    --slide-1: url(/static/images/slideshow/slide1.jpg) ;
    --slide-2: url(/static/images/slideshow/slide2.jpg) ;
    --slide-3: url(/static/images/slideshow/slide3.jpg) ;
    --slide-4: url(/static/images/slideshow/slide4.jpg) ;
    --slide-5: url(/static/images/slideshow/slide5.jpg) ;
  }
  
  //and then
  
  .jumbotron &gt; .jumbotron-slideshow:nth-child(1) { 
    background-image: var(--slide-1); 
  }
  
  .jumbotron &gt; .jumbotron-slideshow:nth-child(2) {
    animation-delay: 6s;
    background-image: var(--slide-2);
  }
  
  .jumbotron &gt; .jumbotron-slideshow:nth-child(3) {
    animation-delay: 12s;
    background-image: var(--slide-3);
  }
  
  .jumbotron &gt; .jumbotron-slideshow:nth-child(4) {
    animation-delay: 18s;
    background-image: var(--slide-4);
  }
  
  .jumbotron &gt; .jumbotron-slideshow:nth-child(5) {
    animation-delay: 24s;
    background-image: var(--slide-5);
  }
  </code></pre>