この記事の要点

background-attachment は背景画像をスクロールに対してどう動かすかを指定する CSS プロパティ 値は scroll（要素と一緒に動く・既定値）/ fixed（ビューポートに固定）/ local（要素内コンテンツのスクロールに追従）の 3 種類 fixed を使うとパララックス（背景だけ静止）演出が CSS だけで作れる iOS Safari など一部スマホブラウザでは fixed が無効化されることがあり、メディアクエリで挙動を切り替える background ショートハンドにまとめて書くこともできる

background-attachment とは

background-attachment は要素に設定した背景画像が、スクロール時にどのように振る舞うかを指定する CSS プロパティです。値を変えるだけで、普通の背景・固定背景・コンテンツ追従背景の 3 通りを切り替えられます。

基本構文

セレクタ {
  background-attachment: scroll | fixed | local;
}

指定できる値

値	意味
scroll（既定）	要素と一緒に背景もスクロールする。要素内部のスクロールには追従しない
fixed	ビューポート（画面）に固定。ページをスクロールしても背景は止まったまま見える
local	要素内コンテンツのスクロールに合わせて背景も動く（要素自身がスクロールバーを持つときに有効）

scroll（既定値）の挙動

body {
  background-image: url("bg.jpg");
  background-attachment: scroll;   /* 省略可 */
  background-repeat: no-repeat;
  background-size: cover;
}

もっとも一般的な指定です。背景画像は要素にくっ付いて、ページをスクロールすると一緒に動きます。

fixed の挙動（パララックス風）

.hero {
  background-image: url("hero.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100vh;
}

背景はビューポートに対して固定され、本文だけが上に流れていくため、背景が透けて見える窓のような視覚効果が得られます。JavaScript なしで簡易パララックスが組めるのが魅力です。

local の挙動

要素自身がスクロールバーを持っているとき（overflow: auto; の領域など）に意味を持ちます。

.scroll-box {
  width: 400px;
  height: 200px;
  overflow: auto;
  background-image: url("paper.png");
  background-attachment: local;  /* 中身をスクロールすると背景も動く */
}

値	外側ページのスクロール	要素内部のスクロール
scroll	動く	動かない
fixed	動かない（固定）	動かない
local	動く	動く

background ショートハンドでまとめる

.hero {
  background: url("hero.jpg") center/cover no-repeat fixed;
}

background ショートハンドでは color / image / position / size / repeat / origin / clip / attachment をまとめて書けます。

スマホ Safari での挙動

iOS Safari や一部の Android ブラウザでは、パフォーマンス上の理由から background-attachment: fixed が事実上無効化され、scroll として描画されることがあります。レスポンシブで意図通りに見せたい場合はメディアクエリで切り替えます。

.hero {
  background: url("hero.jpg") center/cover no-repeat;
  background-attachment: fixed;
}

@media (hover: none) and (pointer: coarse) {
  .hero { background-attachment: scroll; }
}

複数背景での指定

背景画像を複数指定するときは、カンマ区切りで background-attachment も同じ数だけ並べます。

.hero {
  background:
    url("front.png") center/contain no-repeat scroll,
    url("back.jpg")  center/cover   no-repeat fixed;
}

よくあるハマりどころ

症状	原因 / 対処
fixed が効かない（スマホ）	iOS Safari の仕様。メディアクエリで scroll に倒すか、別 div + position: fixed で再現
背景が拡大されてしまう	fixed はビューポート基準で background-size: cover が効くため。サイズの想定をビューポートで取り直す
画面サイズで背景の見え方が変わる	fixed 特有。background-position を center 等の相対指定にする
要素内スクロールで背景を動かしたい	local を使う（scroll ではダメ）

FAQ

Q: パララックスをもっと細かく制御したい
A: CSS だけでは fixed が限界です。複層のスクロール速度をずらしたいなら scroll-driven animations や JS ライブラリ（Lenis 等）を使います。

Q: fixed のときに background-size: cover がおかしい
A: ビューポート基準で計算されるため、画面サイズに合わせて再構成されます。要素サイズ基準にしたいなら scroll に戻すか、別レイヤを切ります。

典型レシピ集

レシピ 1: 固定ヒーロー画像

.hero {
  background: url("hero.jpg") center/cover no-repeat fixed;
  min-height: 100vh;
  color: #fff;
  display: grid;
  place-items: center;
}

レシピ 2: 半透明オーバーレイ + 固定背景

.hero {
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("hero.jpg") center/cover no-repeat fixed;
}

レシピ 3: スクロール可能カード内の和紙風背景

.note {
  width: 100%;
  max-width: 500px;
  height: 240px;
  overflow: auto;
  background: url("paper-texture.png") repeat;
  background-attachment: local;
  padding: 1em;
  line-height: 1.8;
}

パフォーマンスへの影響

fixed はスクロールごとに再描画されるため、大きな画像や複数レイヤを fixed にするとスクロールがカクつくことがあります。特にモバイルでは will-change: transform を付けた別レイヤで擬似的に固定する方が滑らかになるケースもあります。プロダクションで使う前にスクロール FPS を DevTools で確認するのがおすすめです。

関連

• 背景 — 親カテゴリ
• CSS — 上位カテゴリ