OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter YashArora
  • Start date Start date
Y

YashArora

Guest
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:

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.
<p>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 <code>url()</code>.</p>

<p>Here is my sample code:</p>

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

body {
background: url(var(--url));
}
</code></pre>

<p>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.</p>
Continue reading...
 

Latest posts

V
Replies
0
Views
1
vincentsty
V
S
Replies
0
Views
1
Sergey Bakaev Rettley
S
Top