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...
: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);
}