背景画像は1つの要素に複数指定できるようになった？backgroundプロパティのまとめかた

CSS3から要素に対して背景画像を複数指定できるようになっています。1つの要素に対して複数指定できるようになったことで、今までは背景+imgを使って表現をしていた部分を、背景+背景として表現する事ができます。

画像を使用するよりも背景画像を複数指定したほうが、場合によってはとても有効な場合もあるので頭の片隅にいれておいて損はしないと思います。

今回遭遇したケースは、画像を入れられない部分に画像を入れてほしいと言われたケース。
いやいやちょっと待ってくれ、そこは機能的な事情でHTMLを触る事ができない場所なので画像を入れるのはムリムリ。
と言いたかったわけですが、調べてみたら背景画像を複数指定することで解消することができましたというお話。

サンプルページでは、アヒルちゃんの背景画像に、花まるの画像と拡大アイコンの画像を背景画像として扱い、アヒルちゃんの背景画像の上に載せています。

サンプルページを表示

<div class="bg_multi"></div>

.bg_multi {
	background: url(../image/bg_hanamaru.png) no-repeat 10px 10px, url(../image/bg_lupe.png) no-repeat 532px 332px, url(../image/bg_ahiru.jpg) no-repeat center top, #333;
	width: 600px;
	height: 400px;
}

htmlはblock要素を作るだけなので、divのみを設置。あとはcssの作業です。
背景はbackgroundで指定して、途中に「カンマ区切り(,)」をすることで、backgroundの各プロパティがまとめられます。

複数指定としてまとめて書ける要素は以下になります。
・background-image
・background-repeat
・background-attachment
・background-position
・background-clip
・background-origin
・background-size

ちなみに、まとめずに個別でする場合は下記のようになります。

.bg_multi {
	background-image: url(../image/bg_hanamaru.png), url(../image/bg_lupe.png), url(../image/bg_ahiru.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 10px 10px, 532px 332px, center top;
	background-color: #333;
	width: 600px;
	height: 400px;
}

backgroundでプロパティをまとめて記述するよりも、ばらしたほうが可読性は増しますね。
どちらの方法でもやっていることは変わらないので、自分の好きな書き方で作業をするのが良いかと思います。