VSCodeの背景に好きな壁紙を敷く拡張機能と言えば、長らく shalldie.background が定番でした。でも最近はメンテナンスが停滞気味で、起動し直したら背景画像が設定されていなかったり画像形式的に何故か相性が悪かったりと動作が不安定気味です。

本記事では、個人的に代替として使っている KatsuteのBackground をご紹介します。機能面・使い勝手ともに大幅に改善しており、機能的にもシンプルかつ安定しているのでこっち一択可と思います。

ざっくり比較

項目	shalldie.background	Katsute.code-background
メンテ状況	2024 年以降ほぼ停止	2025 年現在も活発に更新
背景対象	エディターのみ	ウィンドウ／エディター／サイドバー／パネル
複数画像	×	○（時間間隔を秒単位で指定可）
画像指定方法	ファイルパスのみ	URL・フォルダGlob・環境変数も可
CSS カスタム	△（手動 CSS 必須）	○（GUI で完結）
公式 API	なし	あり（自作拡張から操作可能）

インストール手順

拡張機能ビュー で katsute.code-background を検索
Install をクリック
画面右下に現れる Background ボタン を押し、Install を実行

Workplace 固有の背景を使いたい場合は Setting Scope を Workspace に変更すると .vscode/settings.json に直接保存されます。

必須！最初にやるべき設定

最初は ウィンドウ全体 に 1 枚だけ壁紙を貼るシンプル構成がオススメです。文字可読性を維持するため、透過度 0.2 〜0.6 ／ぼかし 1px を基準に調整してください。値が４つ必要なものは、ウィンドウ／エディター／サイドバー／パネルの４種類の値です。（使うもの以外は適当でOKです）

settings.json

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'HackGen NF'",

  // ── Katsute.code-background ──
  "background.windowBackgrounds": [
    "${user:home}/.config/wezterm/backdrops/vscode/**"
  ],
  // 各 UI 要素 (window / editor / sidebar / panel) の順で 4 要素
  "background.backgroundOpacity": [0.6, 0.6, 0.6, 0.6],
  "background.backgroundBlur": ["1px", "1px", "1px", "1px"],

  // 追加で貼りたくない UI には空配列を指定
  "background.editorBackgrounds": [],
  "background.sidebarBackgrounds": [],
  "background.panelBackgrounds": [],

  // 自動インストール・スライドショーは無効化
  "background.autoInstall": false,
  "background.changeTime": 0,
}

私は普段からWeztermをターミナルとして使っているため、weztermの設定ディレクトリをそのまま背景画像として指定しています。背景画像やスライドショー等のコンフィグは下記のレポジトリを参考に設定してます。

壁紙フォルダ構成例

$HOME/Pictures/Wallpapers/vscode/
├─ dark/
│  ├─ 001.jpg
│  └─ 002.jpg
└─ light/
   ├─ 101.png
   └─ 102.png

glob 対応 なので dark/** と light/** を 1 行ずつ列挙するだけで OK
作業モードに合わせて瞬時にテーマ変更が可能

使用感スクリーンショット

まとめ

Katsute.code-background は shalldie 系の完全上位互換
ウィンドウ丸ごと＆複数画像対応でカスタム性が段違い