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

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

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

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がその下、一番下に背景色が表示されます。

画像が重なり合う場合や、背景色を指定する場合は順番に注意してください。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする