ダッシュで奪取

レガシーSIer → webエンジニア(見習い) 新しく知ったことのメモを書いています。

【CSS】スマホでも背景画像を固定させたい

タイトルに全てが書いてありますが、スマホだと背景画像が大変なことになってしまったので、対処法をメモしておきます。

目次

  1. やりたいこと
  2. 修正前
  3. 問題点
  4. 修正後
  5. 参考URL
  6. さらなる問題が…

1. やりたいこと

先日、下記のようなページを作りました。
f:id:kyoruni:20190630010730p:plain

格好良いサイトによくある感じで、スクロールさせてもこう…
f:id:kyoruni:20190702113919p:plain 背景画像を固定したまま、コンテンツ部分のみがスクロールされるものをイメージしていました。

2. 修正前

css

body {
  /* 一部省略 */
  color: #fff;
  background: url("背景画像のパス") fixed;
  background-size: cover;
}
  • fixed・・・要素を固定する
  • background-size: cover・・・縦横比を維持したまま、領域いっぱいに広げる

全体を覆うbodyに背景画像を固定表示させています。

3. 問題点

手持ちのiPhoneで画面を表示してみると、
f:id:kyoruni:20190702125918p:plain 背景画像がめちゃくちゃ拡大表示されてボケボケになっている!!

これじゃあ何が写っているのかも分からないので、修正します。

4. 修正後

body {
  /* 一部省略 */
  color: #fff;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url("背景画像のパス") center no-repeat;
  background-size: cover;
}

bodyに背景画像を表示するのはやめて、疑似要素で背景画像を出すようにしました。

  • position: fixedで、疑似要素自体を固定する
  • top left・・・開始位置を指定する(これがないとすごい中途半端な所に背景画像が出てきます)
  • z-index: -1・・・レイヤーを一番後ろにする(bodyよりも下に置きたいので)

f:id:kyoruni:20190702131224j:plain f:id:kyoruni:20190702131235j:plain

これでスマホでも背景画像が思ったとおりに表示され、固定も効くようになりました。

原因も一応調べてはみたのですが、背景画像のfixedとcoverは、スマホだとバグで一緒に使えないよ!ぐらいの情報しか見つけることができませんでした。
調べ方が悪いのかしら…?

5. 参考URL

6. さらなる問題が…

画面の一番上 or 一番下で更にスクロールしてみると…
f:id:kyoruni:20190702131501j:plain
あっ

バウンススクロールというみたいです。どうにか対処できたら追記します…

色々なサイトを回ってみたのですが、ここまで気にして対応しているページが無さそうなので見なかったことにしても良いのかな…(神経質なのでめちゃくちゃ気になってしまう)