Is there a way to interpolate CSS variables with url()?

Question

I want to store my background URLs in custom properties (CSS variables) and use them with the background property. However, I couldn't find a way to interpolate the string when using it as a parameter in url().

Here is my sample code:

:root {
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
    background: url(var(--url));
}

I know that this can be easily done in Sass or LESS using the interpolation function but I'm curious if there is a way to do it without any pre-processor.

You were so close, --url: url(yoururl); background: var(--url); — pol
– pol, Commented Feb 19, 2017 at 16:57
@pol: That's not close at all. That's missing the point of this question by a mile. Still, it is the only solution to the problem with respect to url(). — BoltClock
– BoltClock, Commented Feb 19, 2017 at 17:53
@TemaniAfif I can't be entirely sure the OP had the same point to the question as what brought me here, but I was hoping to do this: :root { --url: "https://example.com/images"; } body { background: url(var(--url)/bg1.jpg); } #wrapper { background: url(var(--url)/bg2.jpg); } Unfortunately, it seems I'm reduced to either javascript or editing a gazillion lines of code between development and production environments. Oh well. — Jay Irvine
– Jay Irvine, Commented Apr 28, 2020 at 18:45

BoltClock · Accepted Answer · 2018-02-21 15:55:42Z

224

You can perform interpolation with most CSS functions, including rgba() (see an example here). In fact, interpolation is one of the main features of custom properties.

But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.

If you didn't understand any of that, that's fine. Just know that you cannot use var() interpolation with url() due to legacy reasons.

Even though the problem depicted in the question is related to the legacy url() token, you cannot do this by building URL tokens out of several var() expressions either, in case you were thinking of trying something like --uo: url(; --uc: ); or --uo: url("; --uc: ");, and background: var(--uo) var(--url) var(--uc);. This is because custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).

If you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

Or, use JavaScript instead of var() to perform the interpolation.

edited Feb 21, 2018 at 15:55

answered Feb 19, 2017 at 18:17

BoltClock

729k165 gold badges1.4k silver badges1.4k bronze badges

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

2 Comments

YashArora Over a year ago

Got your point! @boltclock. I didn't know how url() is parsed and tokenized. If anyone else wants read further, here is a useful link - typedef-url-token.

MikeSchinkel Over a year ago

Thanks for the great answer. So sad that CSS designers did not address this use-case. :-(

Yukulélé · Accepted Answer · 2024-02-13 12:14:03Z

12

You cannot interpolate css variables with url but what you can do is to implement the url function as part of your variable like this:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

in HTML could be:

<div class="css_class_setting_background" style="--url: url('https://download.unsplash.com/photo-1420708392410-3c593b80d416');"> </div>

This works on most of modern browsers.

edited Feb 13, 2024 at 12:14

Yukulélé

17.4k12 gold badges78 silver badges105 bronze badges

answered Mar 3, 2022 at 17:18

André Rodriguez

1451 silver badge3 bronze badges

Comments

brc-dd · Accepted Answer · 2024-06-28 14:53:55Z

4

On modern browsers, you can use image-set() instead of url() as a workaround, as unlike url(), image-set() does support interpolation. So something like this should work:

:root {
  --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
  background: image-set(var(--url) 1x) center / cover no-repeat;

  min-height: 100vh;
  margin: 0;
}

This code should work fine on:

Chrome >= 113
Edge >= 113
Safari >= 14
Firefox >= 88
Opera >= 99

(currently global audience coverage is ~88%)

edited Jun 28, 2024 at 14:53

answered Jun 28, 2024 at 5:21

brc-dd

13.5k3 gold badges63 silver badges93 bronze badges

Comments

AmerllicA · Accepted Answer · 2020-04-04 17:35:50Z

1

I had the same issue on a project with Cordova so I used:

header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}

Apparently, if you use url("") with double quotes on the --var declaration, the value will not work.

edited Apr 4, 2020 at 17:35

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

answered Jan 10, 2019 at 16:34

LucasTelesx

3152 silver badges10 bronze badges

1 Comment

Sandra Andonov Over a year ago

I keep getting Css Syntax Effor when I try to set this: url(PATH_WITH_OR_WITHOUT_QUOTES) as var value. Any ideas?

E_net4 · Accepted Answer · 2023-10-15 18:01:54Z

-2

Here is the solution which works in vue3

<script setup>
const backImage = ref("url(/img/imImage.webp)")
</script>

<style>
div {
  background-image: v-bind(backImage );
}
</style>

Here is the official Vuejs documentation.

Below (playground link) is the solution with both Vuejs and CSS custom properties:

<script setup>
import { ref } from "vue"
  const divImage = ref("url('https://download.unsplash.com/photo-1696075619091-dedae25b1f65')")
</script>

<template>
  <div>Hello</div>
</template>

<style>
:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background:  var(--url);
}

div {
  background:   v-bind(divImage);
}
</style>

edited Oct 15, 2023 at 18:01

E_net4

30.6k13 gold badges118 silver badges155 bronze badges

answered Jan 21, 2022 at 16:06

husayt

15.3k10 gold badges61 silver badges85 bronze badges

Collectives™ on Stack Overflow

Is there a way to interpolate CSS variables with url()?

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related