【簡単に解決】スマホ表示で「background-attachment: fixed」が効かないときの対処法

記事内に商品プロモーションが含まれる場合がございます。本サイトはステマ規制への対応をしてます。

こんにちは、ゆうが（@yuuuugablog）です。

最近スマホのレスポンシブ対応をしている時に、実機で確認していたら「background-attachment: fixedが効かない！」とあせりました。
そこで今回は原因と対処法を解説していきます。

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

スマホ表示で「background-attachment: fixed」が効かない理由

そもそもスマホ表示で背景画像が固定できないのは、クリティカルなバグが原因なんです。
意味がわからないと思うので一旦Can I use…で見てみましょう。

赤線で囲ったところに英語で、「background-attachment:fixedとbackground-size:cover;を同時にiOSでは使うな」的なのが書いてあるんですよ。

スマホ表示で「background-attachment: fixed」が効かないときの対処法

対処法としては、下記です。

要は別の指定をしろということですね。コードを書くとこうなります。

body::before {
background-image:url(./images/image.png)
background-image:no-repeat;
background-image:center;

background-size: cover;
content: "";

position:fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
}

イメージは、bodyそのものにfixedをする感じです。こうすれば直ります。

まとめ：「background-attachment: fixed」が効かないのはあるあるです

Web制作を始めたばかりの人などは、よく引っかかるポイントなんですよね。。。
とはいえ、今回解決する方法がわかったと思うので安心ですね。

また、合わせて下記の記事を読んでおくと、役立つかと思います。

合わせて読みたいデザインのこと

【JS不要】メガメニューを簡単に作る方法【コピペOK】 見やすい！引用ボックスのデザイン3選 【iPhone 13 ProMaxまで対応】レスポンシブデザインのブレイクポイントのテンプレ