CSS変数で背景画像のパス管理はできる？できない？

CSS変数（カスタムプロパティ）は、色やサイズの再利用に便利な機能です。
では、**背景画像のパスもCSS変数で管理できるのか？**と考えたことはありませんか？

実は、画像パスの一部として変数を使うことはできません。
本記事ではその理由と、使いどころの見極めについて詳しく解説します。

やりたかったこと

:root {
  --img-path: "/assets/images";
}

.some-class {
  background-image: url(var(--img-path) + "/bg.png");
}

このように、画像の共通パスを変数でまとめたい！
……ですが、これは動きません。

なぜできないのか？

background-image: url(var(--img-path)/bg.png); /* ❌ 無効 */

url()の中身は文字列として評価されるため、
var()の展開結果をさらに結合することはできないのです。

使える方法は？

背景画像ごとにURLをCSS変数にしておく方法です：

:root {
  --bg-texture: url("/assets/images/bg-texture.png");
  --header-bg: url("/assets/images/header.png");
}

.header {
  background-image: var(--header-bg);
}

この方法であれば、画像の切り替えや一括管理がしやすくなります。

変数にするべきケース／しないべきケース

✔️ 変数にするべき：

• 同じ画像を複数箇所で使っている
• テーマごとに画像を出し分けたい（例：[data-theme="dark"]）
• 画像URLをあとから切り替える設計を考えている

❌ 変数にしない方がよい：

• 一箇所だけでしか使わない背景画像
• パスの一部だけを変数で使いたいとき（できない）

まとめ

• url(var(--path)/file.png) のような使い方はCSSでは不可能
• 画像ごとに url() を含む変数を定義するのが現実的
• 背景画像の再利用やテーマ切り替えではCSS変数が有効

おまけ：Sassの方が柔軟！

Sassなら以下のようにパスの一部だけを変数にできます：

$img-path: "/assets/images";
background-image: url("#{$img-path}/bg-texture.png");

SassとCSS変数、それぞれの強みを使い分けるのがベストです！