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
– Dale, Commented Jan 19, 2017 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 codepen.io/anon/pen/KaWwvz and here's How to create a Minimal, Complete, and Verifiable example — Michael Coker
– Michael Coker, Commented Jan 19, 2017 at 18:26
@Roljhon that did it, must not be seeing the path right thank you! — Sandra Willford
– Sandra Willford, Commented Jan 19, 2017 at 18:35
@SandraWillford A great way to debug is to start with the simplest one! Goodluck buddy! :) — Roljhon
– Roljhon, Commented Jan 19, 2017 at 18:38

user · Accepted Answer · 2017-04-13 23:48:10Z

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, 2017 at 23:48

user

26.2k13 gold badges118 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maurici Abad · Accepted Answer · 2019-07-24 12:24:24Z

4

This was a bug, but it works now. 🎉

answered Jul 24, 2019 at 12:24

Maurici Abad

1,83018 silver badges29 bronze badges

2 Comments

Alex Naidovich Over a year ago

don't work when I try to do it with base64 data url (--example: url('data:image/png;base64,<encoded image here>')). any workaround?

Stefan Rein Over a year ago

@AlexNaidovich it does work (tested in Chrome Version 80.0.3987.132):

--detail-push-chevron: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23ff0000'/></svg>");

And then: .hasBackground { background-image: var(--detail-push-chevron); }

allenski · Accepted Answer · 2024-03-20 15:47:58Z

2

This bug has been resolved!

I also wanted to share my notes as I was building something similar:

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

edited Mar 20, 2024 at 15:47

answered Mar 28, 2022 at 3:26

allenski

1,8615 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

CSS Variables with background-image url

3 Answers 3

Comments

2 Comments

-- SCSS version --

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

-- SCSS version --

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related