ボックス（例: 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番目の方法は縦に長くなります。 どちらも一長一短なので、好きな方法で指定してください。
背景画像が表示される順番
複数の背景画像、背景色を指定した場合、 先に指定したものが上に表示されます。 背景色は一番最後に指定します。
先程の例で言うと、appleが一番上、orangeがその下、一番下に背景色が表示されます。
画像が重なり合う場合や、背景色を指定する場合は順番に注意してください。