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

background-attachment

fixed 値でパララックス（視差）効果、local 値でスクロール可能な要素内での背景スクロール、scroll 値で通常の背景動作を実現できます。特に fixed 値はランディングページなどでの印象的なビジュアル効果に活用されます。モバイルブラウザでの対応状況に注意が必要です。

背景スクロール効果

概要

fixed 値でパララックス（視差）効果、local 値でスクロール可能な要素内での背景スクロール、scroll 値で通常の背景動作を実現できます。特に fixed 値はランディングページなどでの印象的なビジュアル効果に活用されます。モバイルブラウザでの対応状況に注意が必要です。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 15.4+
Firefox 25+

モバイル

Chrome Android 18+
Safari iOS 未対応
Firefox Android 25+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク