Есть ли возможность использовать переменную CSS в CSS "фоновый URL"

Question

Я хотел бы установить базовый домен со всеми своими изображениями в файле CSS, вот что я попробовал:

global.css

:root
{
  --bgd: #C0C0C0;
  --picdomain: "https://somedomain.com/";
}

s1.css

@import url("global.css");

body
{
  background-color: var(--bgd); //works if only it exist
  background: url(var(--picdomain)"some/path/images/pic.png"); //no effect
}

И загрузите s1.css в html

<link rel="stylesheet" type="text/css" href="s1.css">

Цвет фона HTML изменился, но фон не появился. Поэтому я попробовал другой способ:

global.css

@picdomain: "https://somedomain.com";

s1.css

background: url("@picdomain/some/path/images/pic.png");  //can't read variable from imported css

не помогло

Работает только тогда, когда я установил полный URL для изображения, как показано ниже:

global.css

:root
{
  --bgd: #C0C0C0;
  --picdomain: url("https://somedomain.com/some/path/images/pic.png");
}

s1.css

@import url("global.css");

body
{
  background-color: var(--bgd); //works if only it exist
  background: var(--picdomain); //no effect
}

Но это не то, что я хочу...... Возможно ли использовать переменную css в "background"?

Answer 1

    <style type="text/css">
    :root {
        --slide-1: url("{{url('public/assets/images/logo-nfs.png')}}"); /*this is laravel*/ 
        --slide-2: url("<?php echo 'images/logo-nfs.png';?>");  
    }`enter code here`

    .header111 {
      background-image : var(--slide-1); /*this is php*/ 
    }

    .header22 {
      background-image : var(--slide-2);
    }

    </style>

<div class="header111">
  test here 
</div>

<div class="header22">
  test here
</div>
<br>