みなさんこんにちは！LikePayアカデミーの矢野です。
みなさんはBackground-attachment: fixed;を使用してオシャレな動きのあるウェブサイトを作成したけど、モバイルでは動作しないという問題に遭遇したことはありますか？
Background-attachment: fixed;はどうしてもスマホだと効かないのですが、ある方法を使うことで対応をすることが出来ます。
とても簡単な方法なので、是非今回の記事をご覧ください！
Background-attachment: fixed;が効かない理由
理由はシンプルで、各ブラウザが対応させていないだけです。
Appleディベロッパー フォーラムでも質問がされていました。
https://developer.apple.com/forums/thread/99883
最終的には以下のようにまとめられています。
スマホでBackground-attachment: fixed;を対応させる方法
①画像要素を画面全体に広げ、固定する
②画像固定を見せる場所以外に背景色を設定する
この２つのステップで簡単に対応ができますので、詳しく説明していきます。
画像要素を画面全体に広げ、固定する
Divブロックを置き、background-imageから画像を選択します。
positionからFixedを選択し、Fullを押すことで画面全体に画像を広げることが出来ます。
そして、z-indexを-1にすることで他の要素よりも1つ背面に設置させます。
画像固定を見せる場所以外に背景色を設定する
現在だとどの場所にいても、画像が表示されてしまいますので、他のセクション（画像を表示させたくない場所）全てにbackground-colorを付与してください。
画像要素だけz-index: -1;になっているので、background-colorを付与した箇所は画像が隠れていきますね。
まとめ
①画像要素を画面全体に広げ、固定する
②画像固定を見せる場所以外に背景色を設定する
2つのステップで、無事にスマホでも動作するように対応ができました！
今回の実装は動画でも説明していますので、以下のURLからご覧ください！
LikePayアカデミーでは150本を越えるWebflowの動画教材を用意しており、わからないことをいつでもプロの専門家にチャット、個別メンタリングで質問することが出来ます。
「デザインは出来るけどコードが書けない」
「一度挫折をしてしまった経験がある」
「副業を初めてお金を稼ぎたい」
「ITスキルを身につけていつでも好きな場所で働きたい」
などなど、Webflowを学ぶことで全て解決出来ます。
まずはお気軽に無料個別カウンセリングへお越しください！
無料個別カウンセリングはこちら
