お久しぶりの更新ですw
iOSのsafariとなかなか仲良くなれない、Androidのやまだです。

今回の課題はページの途中で画像をはめ込み、その画像を固定するためbackground-attachment: fixed;でコーディングしたところiOSのsafariでは効かない…
と、いうことでiOSのsafariもPCも対応可能なコードを、忘れないうちにメモ

初めに組んだコードのデモ

よくありそうなページ構成で、sectionの区切りとして画像を配置して固定にしました。

See the Pen 背景固定デモ：1 by michiyo yamada (@yamada3) on CodePen.

HTMLはこんな感じ。sectionの内容は自由に

<div class="fixed-body">
<section>
//ここに内容など
</section>
<div class="fixed-block photo1"></div>//背景画像固定
<section>
//ここに内容など
</section>
<div class="fixed-block photo2"></div>
<section>
//ここに内容など
</section>
<div class="fixed-block photo3"></div>
<div class="footer">©yamada3004.</div>
</div>

固定画像の部分だけCSS
background-attachment: fixed;で背景画像を固定します。

.fixed-block {
  min-height: 35vh;
  position: relative;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.fixed-block.photo1 {
  background-image: url();
}
.fixed-block.photo2 {
  background-image: url();
}
.fixed-block.photo3 {
  background-image: url();
}

こちらの方がシンプルで好きなんですが、iOSのsafariだけ利きません。

検索などすると::before要素を使ってposition: fixed;で固定するやり方があるのですが、これだけでは画像が切り替わらず、うまく表示できませんでした。
ページの途中で画像の固定をする場合には「clip」プロパティがよさげ。「clip」プロパティはボックスを部分的に切り抜いて表示してくれます。

「clip」プロパティの背景固定

ということで、::before＋position: fixed; でデモはこちら

See the Pen 背景固定：デモ2 by michiyo yamada (@yamada3) on CodePen.

HTMLも少し変わります。

<div class="fixed-body">
<section>
//ここに内容など
</section>
<div class="fixed-block2">//背景固定の外枠
    <div class="photo1"></div>//画像の配置
</div>
<section>
//ここに内容など
</section>
<div class="fixed-block2">
    <div class="photo2"></div>
</div>
<section>
//ここに内容など
</section>
<div class="fixed-block2">
    <div class="photo3"></div>
</div>
<div class="footer">©yamada3004.</div>
</div>

こちらも固定画像の部分だけCSS
position: fixed;で背景画像を固定します。

.fixed-block2 {
  width: 100%;
  min-height: 35vh;//高さを指定
  overflow: hidden;
  position: relative;//ここが親要素
}
.fixed-block2 .photo1, .fixed-block2 .photo2, .fixed-block2 .photo3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);//内部の長方形を定義します。
  z-index: -1;//レイヤーの順番
}
.fixed-block2 .photo1::before, .fixed-block2 .photo2::before, .fixed-block2 .photo3::before {
  content: "";
  position: fixed;//固定
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.fixed-block2 .photo1::before {
  background-image: url();
}
.fixed-block2 .photo2::before {
  background-image: url();
}
.fixed-block2 .photo3::before {
  background-image: url();
}

ここでのポイントはz-index: -1;と高さの指定。z-indexを使う時は親要素に、position: relative;を忘れずに。それと、section（コンテンツ部分）には背景色を指定しましょう。
背景色を指定しないと、z-index: -1;で配置した背景画像が全画面に表示されます。

「clip」ではなく「clip-path」の方がスムーズに動くようです。

background-attachment: fixed;がiOSで効かない！背景をパララックス風に設定するならclip-pathだ！

ここに動きを付けるとパララックス風になるのですが、これはまたの機会に(＝ﾟωﾟ)ﾉ

関連記事