HTML/CSS

2020.08.20

CSS|iPhoneやiPadでも背景を固定

背景の固定にはbackground-attachment: fixedという便利なものもあるんですが、iosでは背景が拡大されてしまって使い物になりません。

擬似要素を背面に敷いて固定

本来ならbackground-attachment: fixedですむところを、ちょっとコードが増えてアレですが、要は擬似要素を画面いっぱい表示して固定してるだけです。

.bg {
  position: relative;
}
.bg::after {
  content: "";
  width: 100vw;
  height: 100vh;
  background-image: url(images/image1.jpg);
  background-size: cover;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
}

背景のサイズは「background-size:」

background-size

auto
画像の大きさ
contain
比率はそのままで要素に収める
cover
要素を埋めるように拡大、縮小
px
ピクセルでサイズを指定
%
要素に対しての比率で指定

PCでは固定、スマホではスクロール

一度はみたことあるかと思いますが、デモのようなスクロールしたら背景が次々表示されるアレです。
このタイプをiosでも対応しとようとすると動的にz-indexを変えたり、表示非表示を制御しないといけません。なので簡単に対応するには、スマホでは背景の固定をやめるのも手かと思います。

デモはPCではbackground-attachment: fixeddで固定して、スマホ(メディアクエリで)ではスクロールになっています。

DEMO

まとめ

iosのためにいろいろ工夫をしないといけないので、早くこのバグがなくなることを願っています。

背景を固定するとイメージを強く印象づけることができるので、イメージメインのサイトならあしらいにはオススメです。ただし、ユーザーのウィンドウサイズで背景サイズは変わるので、特定の「この画角で表示したい!」という場合はちょっと厳しいかもしれません。