【CSS】背景に複数の画像や色を1つのプロパティで読み込ませる方法

CSSのbackgroundプロパティを使えば、HTMLに背景色や画像を配置する事が可能ですが、WEBサイトのデザインによっては背景画像を複数配置したい場合もあります。

例えば親要素に背景色を入れ、直下の子要素に画像を配置すれば可能ですが、そのためにわざわざ要素を増やしたりCSSを書いたりと、余分なコードを書く事になります。

そこで今回は、1つのプロパティで複数の背景画像や背景色を読み込ませる方法をご紹介していきます。

関連記事：CSSが適用されない原因とは？反映されないときの対処法を解説！

背景画像を複数読み込ませる方法

まず画像を用意します

今回使用する画像は以下の二枚になります。

• 

• 

まずは以下のコードの親要素のクラスに背景画像を設置します。

HTML

<div class="box_parent">
  <p>ここに子要素が入ります。</p>
</div>

css

.box_parent{
  background: url("images/background01.jpg") no-repeeat;
}

問題が無ければ上の図のように背景画像が設定されているかと思います。
次は背景画像を複数設置します。

「,」を使って背景画像を複数設置します

先程のプロパティに複数の画像を読み込ませます。

画像を複数読み込ませるにはセミコロン「,」で値を区切って読み込ませます。

CSS

.box_parent{
  background:
    url("images/background01.png") no-repeeat,
    url("images/background02.png") no-repeeat
  ;
}

表示した時に一番下に設置する背景画像を最後に読み込ませます

背景画像を複数読み込ませる際に、気をつけておきたいポイントは、表示した時に一番下に配置される画像は最後に読み込ませるようにしましょう。
この順番を間違えるとうまく表示がされないので気をつけて設置をしていきましょう。

背景色と背景画像を同時に読み込ませる方法

先程は画像を複数使い背景に設置しましたが、次は背景画像と背景色を1つのプロパティで同時に設置する方法をご紹介していきます。
まずは、以下のコードのクラスに背景色を設定していきます。

HTML

<div class="box_parent">
  <p>ここに子要素が入ります。</p>
</div>

css

.box_parent{
  background:red;
}

問題なく設定されていれば、上の図のように赤色の背景色は表示されていると思います。
次は背景色と背景画像を同時に設定していきます。

背景色→背景画像の順にプロパティの値を入力

背景色と背景画像を同時に読み込ませていきます。

ポイントは先に背景色を指定して、次に背景画像を読み込ませていきます。

CSS

.box_parent{
  background:red  url("images/background.png") no-repeeat;;
}

まとめ

1つのプロパティで背景色や背景画像を複数読み込ませる方法をご紹介いたしましたが、いかがだったでしょうか？

うまく使えば、短くスッキリとしたコードが書けると思いますので、ご興味がある方は是非お試し頂ければ幸いです。