【CSS】背景画像を固定する方法を解説

2024年05月05日 2024年08月31日

今回はCSSで背景画像を固定する方法をご紹介します。コーポレートサイトなどではよく見られるデザインですので実装方法を知りたい方は参考にしてください。

この記事は以下のお悩みを解決します。

・背景画像を固定する方法を知りたい
・iosにも対応させる方法を知りたい

目次[閉じる]

1. スクロールするときの動き
2. background-attachement:fixedで背景画像を固定する
3. position:fixedとclip-pathで背景画像を固定する
4. まとめ

1. スクロールするときの動き

背景画像が固定されているWebサイトをスクロールすると、背景画像の上をそれ以外のページ部分が通過していくようなデザインになります。

例として下の画像を見ると固定された背景画像の上を「Menu」部分が通過している様に見えます。

このようにスクロールしたときに前景と背景が異なる速度で動いて奥行きや立体感を演出する効果のことをパララックス、日本語では視差と呼ばれます。次から背景画像を固定するための実装方法をご紹介します。

2. background-attachement:fixedで背景画像を固定する

背景画像が固定するためには背景画像を指定している要素にbackground-attachement:fixedを指定します。

コードの例が以下のようになります。「Run Pen」を押してスクロールするときに背景画像が固定されているか確認してみてください。

※iphoneでこの記事を見ていただいている方は背景画像が固定されていないと思いますが問題ありません。

See the Pen Untitled by Hiro (@Coffee1610) on CodePen.

<section class="section1">
 <p>下へスクロール</p>    
</section>
<!-- 背景画像 -->
<div class="bg1"></div>
<section class="section2">
 <p>下へスクロール</p>
</section>
<!-- 背景画像 -->
<div class="bg2"></div>
<section class="section3">
 <p>下へスクロール</p>
</section>
<!-- 背景画像 -->
<div class="bg3"></div>
<section class="section3">
<p>おわり</p>
</section>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg1, .bg2, .bg3 {
  width: 100%;
  height: 100vh;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg1 {
  background-image:url('画像のパス');
}

.bg2 {
  background-image:url('画像のパス');
}

.bg3 {
  background-image:url('画像のパス');
}

CSSの解説

19行目：background-attachment: fixed;

background-attachment: fixedは背景画像の位置を固定するCSSのプロパティです。

この実装方法は背景画像を指定している要素にbackground-attachment: fixedを指定するだけなので簡単なのですが、iosではうまく表示されません。

iosではbackground-attachment: fixedが効かないようで背景画像の位置は固定されていません。Webサイトのスマホへの対応は必須になっている事が多いと思うので、この実装方法は現時点では避けたほうがいいかもしれません。

次にbackground-attachment:fixedを使わずにiosにも表示できる実装方法をご紹介します。

3. position:fixedとclip-pathで背景画像を固定する

iosでも背景画像を固定表示するにはposition:fixedとclip-pathを使います。コードの例は以下のとおりです。CodePenの「Run Pen」を押して確認してみてください。

以下は参考にさせていただいたサイトです。

https://hirashimatakumi.com/blog/8010.html

See the Pen Untitled by Hiro (@Coffee1610) on CodePen.

<section class="section1">
 <p>下へスクロール</p>    
</section>
<!-- 範囲外の背景画像を隠す -->
<div class="bg-wrapper">
 <!-- 背景画像 -->
 <div class="bg1"></div>
</div>
<section class="section2">
 <p>下へスクロール</p>
</section>
<!-- 範囲外の背景画像を隠す -->
<div class="bg-wrapper">
 <!-- 背景画像 -->
 <div class="bg2"></div>
</div>
<section class="section3">
 <p>下へスクロール</p>
</section>
<!-- 範囲外の背景画像を隠す -->
<div class="bg-wrapper">
 <!-- 背景画像 -->
 <div class="bg3"></div>
</div>
<section class="section3">
 <p>おわり</p>
</section>

HTMLの解説

5-8行目ほか:<div class=”bg-wrapper”>~</div>

cssでclip-pathを指定し、bg-wrapperクラスの要素の外にはみ出た背景画像を表示しないようにします。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  width: 100%;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  /*範囲外の背景画像を隠す*/
  clip-path: inset(0);
}

.bg1, .bg2, .bg3{
  /*背景画像の位置を固定する*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg1{
  background-image: url("画像のパス");
}

.bg2{
  background-image: url("画像のパス");
}

.bg3{
  background-image: url("画像のパス");
}

CSSの解説

20行目：clip-path: inset(0 0 0 0);

clip-path:inset()は指定した要素を矩形（四角形）に切り取るプロパティです。引数は要素の大きさからどのくらいの幅を切り取るか(上　左　下　右の幅の順)を指定します。

ここでは引数は０なので親要素(.bg-wrapper)のサイズを基準にして背景画像を表示し、親要素からはみ出た部分を非表示にしています。

clip-pathについては以下の記事で解説していますのでclip-pathについてよくわからない方は参考にしてください！

【CSS】clip-pathを使って画像を切り取る方法

https://code-sq.com/clip_path