背景画像(background)を複数指定したい！と思ったことはありませんか？

無駄にdivを増やしていくのも嫌だし・・・。
簡潔にまとめたい！！！

そんなアナタにピッタリ！
今回は、backgroundに複数の画像を指定する方法をご紹介します。

位置や大きさも細かく指定できるのでとても便利なのです。

backgroundに複数の画像を指定してみる

デモページ

例として、デモページを作成しました。
くま、うさぎ、いぬ、ねこ、草、すべて同じdivにbackgroundとして指定しています。

デモページはこちら

CSS

デモページのdivのCSSは以下のようになっています。
このように一つの要素に対して複数の指定が可能です。

background-image(もしくはbackgroundでも可)

画像をカンマ(，)で区切ってひとつずつ指定していきます。
重ねたい場合は上に表示させたいものを最初に持ってきます。

背景色を指定したい場合は一番後ろに書くことも出来ます。

background-repeat

画像をリピート表示させるかどうかを指定します。
記述する順番はbackground-imageで記述した順番です。
今回は草の画像をリピートさせたいので5番目をrepeatさせています。

background-position

画像を表示させる位置を指定します。
background-repeat同様、記述した順番で指定できます。
left やtopだけではなく
background-position:X方向 Y方向
というpxや%などの数値でも指定が可能です。

background-size

今回は使用していませんが、position同様に記述した順番に並べ、
pxや%などの数値で指定することが可能です。

まとめ

以上、CSSで背景画像(background)を複数指定する方法をご紹介しました！
複数指定できるのはとっても便利ですし、無駄を省き綺麗なソースを書くことが出来ます。
これは使えますな(。-`ω-)