CSS variables with background.

Question

I don't understand the possibilities of css variables? I am trying to pass the background image URL to such a variable: it seems to work fine when I pass something as simple as color, etc.

: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 > .jumbotron-slideshow:nth-child(1) { background-image: var(--slide-1); } .jumbotron > .jumbotron-slideshow:nth-child(2) { animation-delay: 6s; background-image: var(--slide-2); } .jumbotron > .jumbotron-slideshow:nth-child(3) { animation-delay: 12s; background-image: var(--slide-3); } .jumbotron > .jumbotron-slideshow:nth-child(4) { animation-delay: 18s; background-image: var(--slide-4); } .jumbotron > .jumbotron-slideshow:nth-child(5) { animation-delay: 24s; background-image: var(--slide-5); } 

Answer 1

This is a bug in Chrome, the code works fine in Firefox.

Now you will need to stick to absolute URLs in var ().

Answer 2

It was a mistake, but it works now. 🎉