背景アタッチメントプロパティ

最終更新：2026-09-13

background-attachment 背景アタッチメントプロパティ

background-attachment は、背景画像がページと一緒にスクロールするかどうかを決めます。デフォルトの scroll は、背景が要素のコンテンツと共にスクロールすることを意味します。fixed は背景をビューポートに固定し、視差（パララックス）効果を生み出します。local は背景を要素の内部コンテンツと共にスクロールさせます。視覚的な効果のためによく使われます。

カテゴリ
初期値	scroll
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

background-attachment: scroll | fixed | local;

⚙️ 値

値	タイプ	説明
`scroll \| fixed \| local`	キーワード	背景のスクロール動作

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
background-attachment	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： fixed 値は背景をビューポートに固定し、視差スクロール効果を作るために一般的に使われます。

注意： background-attachment: fixed はモバイルでのパフォーマンスが悪く、一部のモバイルブラウザではこの値が完全に無視されます。

❓ よくある質問

Qbackground-attachment の scroll、fixed、local の違いは？

A違いは、背景が何に対して位置付けられるかです。scroll（デフォルト）: 背景は要素に対して位置付けられ、要素と共にスクロールします。fixed: 背景はビューポートに固定され、ページがスクロールしてもそのまま留まり、視差効果を生み出します。local: 背景は要素の内部コンテンツに対して位置付けられるため、例えば overflow: auto のコンテナ内では、内部コンテンツがスクロールすると一緒にスクロールします。

Q視差スクロール効果を作るには？

Abackground-attachment: fixed を設定します。背景がビューポートに固定されるため、前景のコンテンツは動き、背景は静止したままになります——それが視差の感覚です。典型的な手法は、複数のセクションに異なる背景画像を fixed で指定し、スクロールに応じて背景が切り替わるようにすることです。ただし iOS や一部のモバイルブラウザは fixed を無視するため、別の対応が必要になる場合があります。

Qなぜモバイルで background-attachment: fixed が効かないのですか？

A主にパフォーマンスのためです。iOS Safari などのモバイルブラウザは、メモリを節約してスクロールを滑らかに保つために、fixed の背景を scroll にダウングレードします。その結果、背景はコンテンツと共にスクロールします。回避策としては、モバイルでは通常の全幅背景を使うか、transform を使った JS の視差ライブラリ（Rellax など）を使い、fixed はデスクトップでのみ有効にします。

Qlocal 値はいつ使うべきですか？

Alocal は、overflow: auto のチャットウィンドウ、コードブロック、データリストなど、独自のスクロールバーを持つコンテナに向いています。background-attachment: local では、背景はコンテナに張り付くのではなく内部コンテンツと共にスクロールするため、視覚的に「コンテンツに属する紙のテクスチャ」のような印象を与えます。