Is there a way to interpolate CSS variables with url()?
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.
How to use CSS variable in `background-image` in Webpack?
It works for me:
.x {
--image: url(/path/img.svg);
background-image: var(--image);
}
How to pass CSS variable in background URL
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>
Have a variable in images path in Sass?
Have you tried the Interpolation syntax?
background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
How to assign background-image url dynamically with only html and css?
Even if I feel like it would be much easier to do with simply using inline background-image
property (especially if you want to concatenate url string). For simple use you can do that like that:
<div class="var" style="--url: url(https://picsum.photos/320/240)"></div>
.var {
background-image: var(--url);
}
For reasons unclear for me, using url(var(--url));
doesn't seem to be working at all (at least at Chrome)
Related Topics
Changes Made to (Static) CSS File Not Reflecting in Django Development Server
Max-Height and Max-Width with CSS Only
Bootstrap 3.0 Affix with List Changes Width
How to "Snap to Pixel" After a CSS Translate
How to Center a Button in Material-Ui
Make Bootstrap Carousel Responsive on Height
How to Let a Div Automatically Set It Own Width
Reactjs How to Use Ref Inside Map Function
How to Add Image Background to Btn-Default Twitter-Bootstrap Button
Vue Binding Value Based on Media Query
Internet Explorer Doesn't Honor My Min-Height: 100% with Flexbox
When Using CSS Scale in Firefox, Element Keeps Original Position
Why Doesn't CSS Hover Work on Table Rows When The Cells Inside The Rows Have Class Names