CSS Variables with background-image url

Question

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

try just putting the path in your variable and using it as `.jumbotron > .blah { background-image: url(--slide-1); }` I've not used them but looks like a go'er — Dale, Jan 19 '17 at 18:25
Looks fine to me, but you didn't include all of your code or working images so it's hard to tell what's wrong. Here's a demo http://codepen.io/anon/pen/KaWwvz and here's [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — Michael Coker, Jan 19 '17 at 18:26
@Roljhon that did it, must not be seeing the path right thank you! — Sandra Willford, Jan 19 '17 at 18:35
@SandraWillford A great way to debug is to start with the simplest one! Goodluck buddy! :) — Roljhon, Jan 19 '17 at 18:38
Note CSS variables is not implemented in Edge or IE according to [caniuse.com](http://caniuse.com/#search=variable) — Marcos Silva, Jan 19 '17 at 18:54

score 13 · Answer 1 · answered Apr 13 '17 at 23:48

13

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

You'll have to stick with absolute URLs in var() for now.

answered Apr 13 '17 at 23:48

user

23,260
9
113
101

score 3 · Answer 2 · answered Jul 24 '19 at 12:24

3

This was a bug, but it works now.

answered Jul 24 '19 at 12:24

Maurici Abad

1,012
9
20

don't work when I try to do it with base64 data url (`--example: url('data:image/png;base64,')`). any workaround? – Alex Naidovich Dec 11 '19 at 14:35
1

@AlexNaidovich it does work (tested in Chrome Version 80.0.3987.132): `--detail-push-chevron: url("data:image/svg+xml;charset=utf-8,");` And then: `.hasBackground { background-image: var(--detail-push-chevron); }` – Stefan Rein Mar 23 '20 at 05:51

allenski · Answer 3 · 2023-01-04T00:26:13.527

-- SCSS version --

In my case we were already using SCSS and needed to do exactly as OP!

SCSS helps to reduce repetitive code, which is easier to look at and great if in the future we need to add or remove slides for example.

You could go a step further and have JS pass you the number of slides as a CSS variable..

..but for this example we'll stick to OP's number of 5 slides and hardcode into SCSS like so:

@for $i from 1 through 5 {
  :root { --slide-#{$i}: url(/static/images/slideshow/slide#{$i}.jpg); }

  //and then

  .jumbotron > .jumbotron-slideshow:nth-child(#{$i}) {
    animation-delay: #{($i - 1) * 6}s;
    background-image: var(--slide-#{$i}); 
  }
}

CSS Variables with background-image url

3 Answers3

-- SCSS version --

Linked