2022/3/26 （更新日: 2022/3/29）

【CSS】背景画像を複数重ねて表示する方法

CSS

背景画像を複数重ねて表示するにはどうやるの？

そんな疑問にお答えします。

背景画像って複数重ねて表示できるんだ！ってさっき初めて知った方、その方法は割と簡単です。

でも注意すべき点もあります。

そこを詳しく解説します。

1 背景画像を複数重ねて表示する
- 1.1 HTML
- 1.2 CSS
2 背景画像の表示順序に注意！
3 ショートハンドの指定の仕方に注意！

背景画像を複数重ねて表示する

背景画像を複数表示する方法は次のとおりです。

💡背景画像を複数表示する方法　

「background-image」に２つの画像パスをカンマ区切りで記述する
背景画像を調整するプロパティもカンマ区切りで値を記述する

では実際にコードを書いてみます。

今回はサンプルとして次の２つの画像を背景画像として指定します。

1つ目の背景画像

浜辺の背景

2つ目の背景画像

浦島太郎の画像

HTML

<div class="bg"></div>

CSS

.bg {
  width: 100%;
  height: 700px;
  /* background-imageに2つの画像パスをカンマ区切りで記述する */
  background-image: url(../img/bg-urasima.png),url(../img/bg-sea.jpg);

　/* 背景画像を調整するプロパティもカンマ区切りで値を記述する */
  background-size: 30% auto, cover;
  background-position: left bottom, center;
  background-repeat: no-repeat, no-repeat;
}

表示は以下のようになります。

背景画像の複数表示サンプル

背景画像の表示順序に注意！

記述方法は難しくはありませんが注意すべき点が1つあります。

それは背景画像のパスを指定する順番です。

背景画像が複数指定されている場合、パスで先に指定した画像が上（前側）にきます。

ですのでこの順番が逆だと思ったとおりにはなりません。

たとえば上のサンプルのCSSをこのように変更します。

.bg {
  width: 100%;
  height: 700px;
  background-image: url(../img/bg-sea.jpg), url(../img/bg-urasima.png);
  background-size: cover, 30% auto;
  background-position: center, left bottom;
  background-repeat: no-repeat, no-repeat;
}

このような指定ではサイズの大きい画像が上（前側）にきて、その下にあとのパスの画像がくるので隠れて表示されません。

表示サンプル

ですので指定する順番には注意が必要です。

ショートハンドの指定の仕方に注意！

上の例では各プロパティを分けて記述しましたが、コード量を少なく一気に書きたい場合はショートハンドが便利です。

ショートハンドにするとこのような記述になります。

.bg {
  width: 100%;
  height: 700px;
  background: url(../img/bg-urasima.png)left bottom / 30% auto no-repeat,
              url(../img/bg-sea.jpg)center / cover no-repeat;
}

ここも1つ注意点があります。

💡ポイント！　backgroundショートハンドでの注意点

background-sizeが入ったショートハンドを使う場合はbackground-positionとセットで「/」を挟んで指定する

ここは順番も大事で「background-position」のあとに「/」を挟み「background-size」という形で記述します。

この点だけは気をつけましょう。

以上です。