CSS - ボックスに複数の背景画像を表示する

ボックス（例: div要素）に複数の背景画像を表示したい場合は、プロパティの値をカンマ（,）区切りで指定します。

background プロパティを使って、一括で指定する方法と、 background-image プロパティなどを別々で指定する方法の２通りあるのでそれぞれの方法を紹介します。

background プロパティを使って、複数の背景画像を表示する

このボックスの中に複数の背景画像を表示しています。

background プロパティで一括指定する場合は、次のようになります。

下の例では「background-image」、「background-position」、「background-repeat」を一括で指定しています。


.box1 {
  border: 1px solid silver;
  width: 400px;
  background: url("https://infoteck-life.com/img/img02/apple.png") left top no-repeat,
              url("https://infoteck-life.com/img/img02/orange.png") right bottom no-repeat;
}

プロパティを別々に指定して、複数の背景画像を表示する

このボックスの中に複数の背景画像を表示しています。

background プロパティを使わずに、別々で指定する場合は次のようになります。


.box2 {
  border: 1px solid silver;
  width: 400px;
  background-image: url("https://infoteck-life.com/img/img02/apple.png"),
                    url("https://infoteck-life.com/img/img02/orange.png");
  background-color: #ffffbf;
  background-position: left top,
                       right bottom;
  background-repeat: no-repeat,
                     no-repeat;
                     
}

1番目の方法は横に長くなり、2番目の方法は縦に長くなります。どちらも一長一短なので、好きな方法で指定してください。