【CSS】複数の背景画像を指定する方法

CSS3ではbackground-imgで複数の背景画像を設定することができます。これによって、背景の装飾をCSSひとつで管理することができます。

これまでは複数の要素を作成しそれぞれに背景を指定していましたが、1つのCSS上で完結できると管理もしやすいですし、コードもスッキリします。

ということで今回はCSSで複数の背景画像を指定する方法をご紹介いたします。

目次非表示

HTML

まずは背景を置くためのHTMLを書いていきます。今回は空のdiv要素をだけ作り進めていきます。

背景を複数指定する場合のCSSの書き方は下記のようになります。ポイントはカンマで区切って指定すること。

最初に記述した背景が一番上、その後に記述した背景がどんどん下になります。つまり、左が一番上、右に行くにつれて下になっていきます。

ちなみに最後の背景にだけ、背景色（グラデーション含む）を指定することができます。※背景色を指定する場合はbackground-imageではなくbackgroundで全て指定しましょう。

先ほどと同じようにカンマで区切ることで、それぞれの画像にbackground-repeatやbackground-positionなどを使い、背景を調整することもできます。

実際に上記コードを使って画像を配置してみます。背景画像と上に乗せる画像、ロゴのようなものを使っていきます。

完成はこんな感じです。コードも見れますのでご確認ください。