CSSで背景画像を複数重ねて表示する方法

ホームページの制作中に1つのCSS要素に背景画像を複数枚重ねて表示したいなぁと思ったことはありませんか？

背景画像ごとにCSSを分けて指定する方法もございますが、ソースコードの記述が重複してしまい複雑になってしまいます。

CSS3から1つの要素に複数の背景を指定できるようになりました。その記述の方法を２パターンご紹介したいと思います。

透過PNG画像などの準備
CSSで背景画像の指定
- パターン１：各画像ごとに指定する場合
- パターン２：要素ごとに指定する場合
まとめ

透過PNG画像などの準備

まずは、重ねたい画像を用意します。
今回は空の写真を背景に、ロゴの透過PNG画像を重ねてみます。

ロゴ画像（透過PNG）

透過PNG画像の作り方は下記の記事をご確認ください。いろんな方法での作成方法を紹介しています。

CSSで背景画像の指定

背景画像、上に重ねる透過PNG画像の２つが準備ができたら、任意のフォルダ（imgフォルダなど）に移動し、CSSを使って背景画像を指定していきます。

パターン１：各画像ごとに指定する場合

まずは、各画像単位で指定していく方法です。
background:の後にURL（）で画像のディレクトリ、半角スペースを空け、ポジション、半角スペース、リピートするかしないか、を順番に記述し、これを重ねたい画像の数だけ指定します。

この時、前面に表示させたい画像の記述を先頭に持ってきます。

CSSの記述がこちらです。

 css
#bg_sora {
  background:
    url(logo.jpg) right center no-repeat,
    url(bg.jpg) center center no-repeat;
}

ポジションの指定は前が左右の位置、後ろが上下の位置を指定します。
右揃えの上下センターなら「right center」、左上なら「left top」、上下左右のセンターなら「center center」

そして、最後に繰り返し（リピート）表示するか否か、しない場合は「no-repeat」、左右にのみリピートする場合は「repeat-x」、上下にのみリピートする場合は「repeat-y」、上下左右にリピートする場合は「repeat」を記述します。

シンプルですよね！

意味合いは全く同じなのですが、好みによって書き方がもう1種類あります↓

パターン２：要素ごとに指定する場合

先ほどのが画像ごとにしてするのに対して、今度はディレクトリ、ポジション、リピートと各要素ごとに記述していきます。

こちらも最前面に表示させたいものを最初に持ってきます。

 css
#bg_sora {
  background-image:
    url(logo.jpg),
    url(bg.jpg);







  background-position:
    right center,
    center center;
  background-repeat:
    no-repeat,
    no-repeat;
}

どちらでもの書き方でも同じ表示になりますので、書き方は好みにもよりますが、パターン２の要素ごとに分けて記述する方が長くなってしまいますので、個人的にはオススメはパターン１の画像ごとに指定する方法です。

ソースコードをスッキリさせておいたほうが、後から修正する際などに見つけやすいので、もし会社などで複数人で同じサイトを修正することがある場合は、記述の仕方を話し合って統一しておく事をおすすめします。

まとめ

いかがでしたでしょうか。

CSSで背景画像を複数枚重ねて表示する記述の仕方を２種類ご紹介いたしました。

知っていれば簡単に指定できるので、CSSを別に記述し<div>を入れ子にして記述するより、１つのCSSに背景画像を複数枚まとめて指定し、ソースコードの無駄を省き綺麗なサイトを心がけましょう。

今回は画像を２枚重ねましたが、3枚、4枚と数を増やして表示することも可能です。

CSSをHTMLに適用させる方法はこちらにまとめております。

あわせて読みたい！