2

I need to pass an image to the CSS background like this it works:

.tinted-image {
  height: 125px;
  background: linear-gradient(to right, var(--color), var(--color2)),
    url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}

but when I try to do it like this, I get a syntax error in VS Code

.tinted-image {
      height: 125px;
      background: linear-gradient(to right, var(--color), var(--color2)),
        url(var(--url));
    }
Cœur
  • 37,241
  • 25
  • 195
  • 267
Harry
  • 1,021
  • 4
  • 21
  • 41

1 Answers1

4

You can use it like the following:

:root {
  --color: rgba(255, 0, 0, 0.5);
  --color2: rgba(0, 255, 0, 0.5);
  --url: url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}
.tinted-image {
  height: 125px;
  background: linear-gradient(to right, var(--color), var(--color2)), var(--url);
  width: 200px;
}
<div class="tinted-image"></div>

CSS variables doesn't work on Internet Explorer. You can find all browsers with CSS variable support here: https://caniuse.com/#feat=css-variables

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87