【HTML、CSS】スクロールしたときに画像を固定させたい

前提・実現したいこと

HTMLとCSSを使ってWebサイトを作っています。
画面をスクロールしたときに画像を固定させたいです。
ご教授お願い致します。

発生している問題・エラーメッセージ

WindowsPCで確認すると自分が思っている動きになっていますが、iPhoneで見ると画像が固定されずにスクロールと一緒に流れてしまいます。
下記URLのエリア2のところのような動きがiPhoneだと実現できません。
画像固定例

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="./style.css">
7    <title>Document</title>
8</head>
9<body>
10    <header></header>
11    <main>
12        <div class="area-1">
13            <h1>エリア1</h1>
14        </div>
15        <div class="area-2">
16            <h1>エリア2</h1>
17        </div>
18        <div class="area-3">
19            <h1>エリア3</h1>
20        </div>
21    </main>
22    <footer></footer>
23</body>
24</html>

CSS
1.area-1 {
2    height: 500px;
3    background-color: rgba(255, 0, 0 ,.2);
4}
5
6.area-2 {
7    height: 500px;
8    background-image: url("./image.webp");
9    background-attachment: fixed;
10    background-size: cover;
11}
12
13.area-3 {
14    height: 500px;
15    background-color: rgba(0, 0, 255 ,.2);
16}
17
18h1 {
19    background-color: #fff;
20    display: inline-block;
21    margin: 16px;
22}

試したこと

狙った動きにならない原因を調べてみると、iOSで「background-attachment: fixed」と「background-size: cover」が共存できないという記事がありました。
・【CSS】background-attachment:fixedがスマホだけ効かない原因と対処法
・スマホで『background-attachment: fixed』が効かないときの解決法
両サイトで紹介されている方法でやってみたものの上手くいかず。
他に有効なアプローチ方法はありますでしょうか。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

参考にしたリンク先の方法でできると思いますが。

疑似要素に背景画像を表示させて、position: fixed; で固定する。

css
1.area-2 {
2  height: 500px;
3}
4.area-2::before {
5  background: url("./image.webp") no-repeat center;/* 画像（ここにfixedは入れない） */
6  background-size: cover;/* cover指定できる */
7  content: "";
8  display: block;
9  position: fixed;/* 擬似要素ごと固定 */
10  top: 0;
11  left: 0;
12  z-index: -1;
13  width: 100%;/* 横幅いっぱい */
14  height: 100vh;/* 縦幅いっぱい */
15}