【Webflow】スマホで『background-attachment: fixed』が効かないときの対処法

みなさんこんにちは!LikePayアカデミーの矢野です。みなさんはBackground-attachment: fixed;を使用してオシャレな動きのあるウェブサイトを作成したけど、モバイルでは動作しないという問題に遭遇したことはありますか?Background-attachment: fixed;はどうしてもスマホだと効かないのですが、ある方法を使うことで対応をすることが出来ます。とても簡単な方法なので、是非今回の記事をご覧ください!

執筆者
更新日
2022-05-19
カテゴリー

みなさんこんにちは!LikePayアカデミーの矢野です。

みなさんはBackground-attachment: fixed;を使用してオシャレな動きのあるウェブサイトを作成したけど、モバイルでは動作しないという問題に遭遇したことはありますか?

Background-attachment: fixed;はどうしてもスマホだと効かないのですが、ある方法を使うことで対応をすることが出来ます。

とても簡単な方法なので、是非今回の記事をご覧ください!

Background-attachment: fixed;が効かない理由

理由はシンプルで、各ブラウザが対応させていないだけです。

Appleディベロッパー フォーラムでも質問がされていました。

https://developer.apple.com/forums/thread/99883

最終的には以下のようにまとめられています。

スマホでBackground-attachment: fixed;を対応させる方法

①画像要素を画面全体に広げ、固定する
②画像固定を見せる場所以外に背景色を設定する

この2つのステップで簡単に対応ができますので、詳しく説明していきます。

画像要素を画面全体に広げ、固定する

Divブロックを置き、background-imageから画像を選択します。
positionからFixedを選択し、Fullを押すことで画面全体に画像を広げることが出来ます。
そして、z-indexを-1にすることで他の要素よりも1つ背面に設置させます。

画像固定を見せる場所以外に背景色を設定する

現在だとどの場所にいても、画像が表示されてしまいますので、他のセクション(画像を表示させたくない場所)全てにbackground-colorを付与してください。

画像要素だけz-index: -1;になっているので、background-colorを付与した箇所は画像が隠れていきますね。

まとめ

①画像要素を画面全体に広げ、固定する
②画像固定を見せる場所以外に背景色を設定する

2つのステップで、無事にスマホでも動作するように対応ができました!

今回の実装は動画でも説明していますので、以下のURLからご覧ください!

LikePayアカデミーでは150本を越えるWebflowの動画教材を用意しており、わからないことをいつでもプロの専門家にチャット、個別メンタリングで質問することが出来ます。

「デザインは出来るけどコードが書けない」

「一度挫折をしてしまった経験がある」

「副業を初めてお金を稼ぎたい」

「ITスキルを身につけていつでも好きな場所で働きたい」

などなど、Webflowを学ぶことで全て解決出来ます。

まずはお気軽に無料個別カウンセリングへお越しください!

無料個別カウンセリングはこちら