スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)

スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)

スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

背景画像を固定して中のコンテンツだけをスクロールさせるページを作成していたところ、スマートフォンでは「background-attachment:fixed;」が効かないことに気付きました。

スマートフォンでも背景画像を固定させたかったので、「background-attachment:fixed;」と同様の挙動をさせるための代替手順を試したらうまくいったので、ご紹介したいと思います。

スポンサードリンク

スマートフォンで背景画像を固定させる方法

PCの「background-attachment:fixed;」と同様に、スマートフォンでも背景画像を固定させるためには、CSSで以下のように指定します。

body::before {
content: "";
background: url(img/bg-sp.png) no-repeat center center;
background-size: cover;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}

bodyに::before疑似要素で背景画像を指定しています。

これで、背景全体に固定した画像を設置できます。

あとがき

スマホで「background-attachment:fixed;」が効かないとは知りませんでした。勉強不足ですね…

上記の代替案が使えるので、同じように固定背景を実装したい時は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。