I want to use a css calculation as part of a url() function in order to call an image. Is there a way to do this? The first line should simply produce the second line, below. I believe part of what I’m doing here is called “concatenation” which should be possible in css using no operators.
I want the result of the calculation to be put into the url, displaying _Emerald/5.png as the background-image. If it matters, (I don’t think it does) the reason I’m doing it this way is because I’m using Anki field replacement to generate a different card/page if given different data. My actual idea looks something like:
background-image: url("_Emerald/" calc("{{field}} - 1") ".png");
where {{field}} simply replaced with 6, or whatever number, to call a different image given a different number.
Hmm. I’m sorry, I must be making some other error, then. After the first string (“_Emerald/” in my example) it expects a closing parentheses, or at least VSC does. The first example in my OP should work, yes?
Is there any chance that this functionality isn’t available in old browsers? Anki is using Chrome/112 which is not the latest, but seems to have most things.
This version with the variables (neat!) unfortunately also gives errors, expecting me to close the url() function after the first string. I’m thinking this is some other mistake I’m making, I’ll have to set it aside for now. But thank you for the help.
edit: though maybe I should note that–if I’m following correctly–these two answers give opposite information on whether it’s possible to use calc() within a url() function.