Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

background-attachment

background-attachment は CSS のプロパティで、背景画像の位置をビューポートの中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

背景スクロール効果

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-attachment
1
12
1
1
18
3.2
fixed
1
12
2
15.4
18
5
local
1
12
25
15.4
18
15.4
multiple backgrounds

複数の背景
1
12
3.6
1.3
18
3.2
scroll
1
12
1
1
18
3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 4件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15.4)
  • このバージョンで機能が削除されました (14)
実装メモ
  • 「fixed」は認識されますが、効果はありません。 関連するバグ 219324 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「fixed」は認識されますが、効果はありません。 バグ 275247 を参照してください。
注釈 4件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15.4)
  • このバージョンで機能が削除されました (13)
実装メモ
  • 「local」は認識されますが、効果はありません。 バグ 219324 を参照してください。
注釈 5件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15.4)
  • このバージョンで機能が削除されました (13)
実装メモ
  • 「local」は認識されますが、効果はありません。 バグ 219324 を参照してください。
  • `-webkit-overflow-scrolling: touch` が設定されている場合、`local` は効果がありません。

基本構文

CSS 
.parallax {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-size: cover;
}

ライブデモ

Fixed(pararaks)

CSS Fixed(pararaks) demo.

プレビュー全画面表示

Scroll(normal)

CSS Scroll(normal) demo.

プレビュー全画面表示

Local(insidepartscroll)

CSS Local(insidepartscroll) demo.

プレビュー全画面表示

実務での使いどころ

  • パララックススクロール効果の実装

    background-attachment: fixed を使用して、スクロール時に背景が固定されるパララックス効果をCSSだけで実現できます。

注意点

  • モバイルSafari（iOS）では background-attachment: fixed の挙動が不安定で、パフォーマンス上の理由から scroll にフォールバックされることがあります。

アクセシビリティ

  • パララックス効果は前庭障害のあるユーザーにめまいや不快感を引き起こす可能性があります。prefers-reduced-motion クエリで代替表示を提供してください。

参考リンク