Having trouble setting a base domain for all my pictures in a CSS file. Here's what I've tried:
In global.css:
:root
{
--bgd: #C0C0C0;
--picdomain: "https://somedomain.com/";
}
In s1.css:
@import url("global.css");
body
{
background-color: var(--bgd); //works if it exists
background: url(var(--picdomain)"some/path/images/pic.png"); //no effect
}
Then I load s1.css in the HTML.
<link rel="stylesheet" type="text/css" href="s1.css">
The HTML background-color changed, but the image didn't show up. So I tried another way:
In global.css:
@picdomain: "https://somedomain.com";
In s1.css:
background: url("@picdomain/some/path/images/pic.png"); //can't read variable from imported css
This didn't help either.
It only works when I set the full URL for an image like below:
In global.css:
:root
{
--bgd: #C0C0C0;
--picdomain: url("https://somedomain.com/some/path/images/pic.png");
}
In s1.css:
@import url("global.css");
body
{
background-color: var(--bgd); //works if it exists
background: var(--picdomain); //no effect
}
But this isn't the solution I'm looking for... Is there a way to use a CSS variable in the "background" property?