0

Is it possible to merge path string of url() in css with the help of var() if possible so please Help me and thanks in advance.

My Current CSS

<style type="text/css">
    .svg {
        height: 20px;
        width: 20px;
        background-image: url("https://example.com/SVG/tools/svgweb/samples/svg-files/svg/failed.svg");
        display: inline-block;
    }
    .svg.spn-pending {background-image: url("https://example.com/SVG/tools/svgweb/samples/svg-files/svg/pending.svg")}
    .svg.spn-success {background-image: url("https://example.com/SVG/tools/svgweb/samples/svg-files/svg/success.svg")}
</style>



But i want to use like this
Example

<style type="text/css">
    :root {
        --uri-path: "https://example.com/SVG/tools/svgweb/samples/svg-files/svg/";
    }

    .svg {
        height: 20px;
        width: 20px;
        background-image: url(var(--uri-path)+"failed.svg");
        display: inline-block;
    }
    .svg.spn-pending {background-image: url(var(--uri-path)+"pending.svg")}
    .svg.spn-success {background-image: url(var(--uri-path)+"success.svg")}
</style>
S Kumar
  • 214
  • 3
  • 11
  • Discussion at https://stackoverflow.com/questions/38336341/css-variables-and-string-concatenation indicates this is not possible. AFAIK the only place you can concatenate strings and vars is in the CSS content property value. – A Haworth Feb 11 '22 at 22:15

0 Answers0