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で固定して、スマホ（メディアクエリで）ではスクロールになっています。
まとめ
iosのためにいろいろ工夫をしないといけないので、早くこのバグがなくなることを願っています。
背景を固定するとイメージを強く印象づけることができるので、イメージメインのサイトならあしらいにはオススメです。ただし、ユーザーのウィンドウサイズで背景サイズは変わるので、特定の「この画角で表示したい！」という場合はちょっと厳しいかもしれません。
