background-imageをfixedさせたい

background-imageをある一つのsectionに固定したいのですが下記の記述だとiOSで効いてくれないので代わりの方法を教えてください。

background-size: cover ;
background-attachment: fixed;
→iOSは一緒に使えない。

・androidでは問題なく固定されます。
・キャッシュの削除は試しています。

HTML
1    <section class="genre">
2        <div class="genre_wrapper">
3            <div class="genre_content">
4                <div class="genre_bgc">
5                </div>
6                <img src="image/genre1.jpg" alt="キャンプ">
7                <div class="genre_subject">
8                    <p>キャンプ</p>
9                </div>
10                <div class="genre_moreBtn">
11                    <p>more</p>
12                </div>
13            </div>
14            <div class="genre_content">
15                <div class="genre_bgc">
16                </div>
17　　　　　　　～～以下略～～

CSS
1.genre{
2    height: 100vh;
3    position: relative;
4    &::after{
5        position: absolute;
6        top: 0;
7        left: 0;
8        height: 100vh;
9        width: 100%;
10        background-image: url(../../image/img3.jpg);
11        background-repeat: no-repeat;
12        background-position: 50% 50%;
13        background-size: cover ;
14        background-attachment: fixed;
15        z-index: -50;
16        content: '';
17    }

『試したみた事』

①background-size: 100% 100%;
→画面が拡大し過ぎてNG。

②position: fixedで固定
background-attachment: fixedを消してabsoluteをfixedに変更。

CSS
1.genre{
2    height: 100vh;
3    position: relative;
4    &::after{
5        position: fixed;
6        top: 0;
7        left: 0;
8        height: 100vh;
9        width: 100%;
10        background-image: url(../../image/img3.jpg);
11        background-repeat: no-repeat;
12        background-position: 50% 50%;
13        background-size: cover ;
14        z-index: -50;
15        content: '';
16    }

→background-imageがHTML全体に効いてしまう。

position: fixedを親要素にのみ効かせたいのですが、調べても解決できませんでした。

宜しくお願いします。

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

回答1件

iOSでの背景画像は、coverとfixedを一緒につかえない仕様になっているので、
WEBで検索すると、困っている人もたくさんいるようです。

でも、以下のように、背景画像を擬似要素に適用するとできますよ。

css
1body::before{
2  content:"";
3  top:0;
4  left:0;
5  z-index:-1;
6  width:100%;
7  height:100vh;
8  display:block;
9  position:fixed;
10
11  background-image:url(画像パス);
12  background-size:cover;
13}