AI・Web制作で得た知見をまとめています。

This is STANDARD

CSS

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変数、それぞれの強みを使い分けるのがベストです!

-CSS
-, ,

Copyright© This is STANDARD , 2025 All Rights Reserved Powered by STINGER.