Menu
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);
}
436
Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png');
Images. Using an image on a background is pretty simple: body { background: url(sweettexture.jpg); } The url() value allows you to provide a file path to any image, and it will show up as the background for that element. You can also set a data URI for the url() .
url() The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS functions, like the attr() function.
This is a bug in Chrome, the code works fine in Firefox.
You'll have to stick with absolute URLs in var() for now.
103
This was a bug, but it works now. 🎉
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
