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

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

2022
5
18

みなさんこんにちは!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を学ぶことで全て解決出来ます。

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

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

この記事をシェア

あなたの事業に成長を

集客に特化したWebflowサイトで自社マーケティングをより柔軟に、より効果的にします。制作依頼を送信したら、無料打ち合わせであなたのニーズをヒアリングして、最適なソリューションを提案します。

支援先企業
株式会社リコー凸版印刷株式会社株式会社NTTドコモフォースタートアップス株式会社株式会社ニジボックス株式会社E-Housing株式会社ファンディオBooko株式会社unique onTerackathon株式会社ココウリE-Three

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談