【初心者でもわかる】背景画像を固定して、スクロールしても動かないようにする方法

#どうも7noteです。固定背景画像の作り方

スクロールしても、動かない固定の背景画像の設定方法を解説していきます。

固定背景の書き方

index.html

<div class="box">
  <p>サンプルテ 〜省略〜 サンプルテキスト</p>
  <img src="photo01.jpg" alt="">
  <p>サンプルテ 〜省略〜 サンプルテキスト</p>
  <img src="photo01.jpg" alt="">
</div>

style.css

.box {
  background: url(sample.jpg) no-repeat; /* 背景画像を指定、繰り返し禁止 */
  background-attachment: fixed; /* 背景画像をスクロールしても固定させる */
  background-size: cover; /* 背景画像を要素全体を覆うように拡大縮小させる */
}
	
p {
  background: rgba(255,255,255,0.5); /* 半透明の白い背景を設定 */
  padding: 20px;  /* 適当な余白を指定 */
}

img {
  width: 100%; /* 画像幅を100%に指定 */
}

##まとめ

「1行で簡単指定」＆「自由に他の装飾と組み合わせが可能」なところがポイントですね。
難しくなく簡単に設定することができます。

一時期よく見かけましたが最近ではこれを使ってるサイトは減ってきたように感じます。
逆に動画なんかが増えてるような印象がありますね。計測したわけではないので実際のところはあまりわからないですが。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ