iphone（safari）での背景画像の複数固定表示

実現したいことはiphone（safari）での背景画像の複数固定表示です。

iphone(safari)でも背景画像を位置固定で表示させるために、1つの画像であれば、以下のようなCSSで固定背景画像を表示させることはできますが、複数の背景画像を表示するにはどのような方法がありますか。

body::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(sample_a.jpg) center no-repeat;
    background-size:cover;
}

下のサンプルではコンテンツ間のスキマ1とスキマ2でそれぞれ異なった背景画像を表示させたいのですが、
各スキマに指定した背景画像が重なって表示され、意図した通りには表示されません。

それぞれのスキマ1とスキマ2で異なった背景画像を固定しながら表示させる方法はありますか？
よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>demo</title>    
</head>
<body>
    <section id="aaa">
        <h1>コンテンツA</h1>
    </section>
    <div class="back-img-a">スキマ1</div>
    <section id="bbb">
        <h1>コンテンツB</h1>
    </section>
    <div class="back-img-b">スキマ2</div>
    <section id="ccc">
        <h1>コンテンツC</h1>
    </section>
</body>
</html>
<style>
body, h1{margin:0;padding:0;}

#aaa, #bbb, #ccc{
    height:400px;
    background-color: #ff0;;
}
.back-img-a, .back-img-b{
    height: 100px;
}
.back-img-a::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(sample_a.jpg) center no-repeat;
    -webkit-background-size:contain;
    background-size:cover;
}
.back-img-b::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(sample_b.jpg) center no-repeat;
    -webkit-background-size:contain;
    background-size:cover;
}
</style>

Lhankor_Mhy

2021/06/01 02:20

background-attachment: fixed; はバグるから使っていない、ということでしょうか？

flannel

2021/06/01 06:05 編集

こんにちは。そうです。PCブラウザやandroidでは問題ありませんが、safari（iPhone）ではbackground-attachment: fixed;とbackground-size: coverを同時に使用すると意図した結果表示されないバグがあるとのことで、上記のようにCSSで指定しています。

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

回答2件

ベストアンサー

ざくっと書いたのでもっと良い書き方があると思いますが、 position: sticky を使ってみてはいかがでしょうか？

なお各コンテンツに十分な高さがないと、微妙な動作になります。

https://codesandbox.io/s/old-brook-6qyeo

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <title>demo</title>
6    <style>
7      body,
8      h1 {
9        margin: 0;
10        padding: 0;
11      }
12
13      #aaa,
14      #bbb,
15      #ccc {
16        height: 100vh;
17        background-color: #ff0;
18      }
19
20      .gutter {
21        height: 30vh;
22      }
23
24      .back-img-a,
25      .back-img-b {
26        display: block;
27        position: sticky;
28        top: 0;
29        z-index: -1;
30        height: 0;
31        max-height: 0;
32        overflow: visible;
33      }
34
35      .back-img-a::after,
36      .back-img-b::after {
37        content: "";
38        position: absolute;
39        display: block;
40        top: 0;
41        left: 0;
42        width: 100%;
43        height: 100vh;
44        background-position: center;
45        background-repeat: no-repeat;
46        -webkit-background-size: contain;
47        background-size: cover;
48      }
49
50      .back-img-a::after {
51        background-image: url(https://placekitten.com/640/1136);
52      }
53
54      .back-img-b::after {
55        background-image: url(https://placekitten.com/g/640/1136);
56      }
57    </style>
58  </head>
59  <body>
60    <div class="back-img-a"></div>
61    <section id="aaa">
62      <h1>コンテンツA</h1>
63    </section>
64    <div class="gutter">スキマ1</div>
65    <div class="back-img-b"></div>
66    <section id="bbb">
67      <h1>コンテンツB</h1>
68    </section>
69    <div class="gutter">スキマ2</div>
70    <section id="ccc">
71      <h1>コンテンツC</h1>
72    </section>
73  </body>
74</html>