[CSS3]CSS3で背景画像を複数指定する！IE9以上

3歩進んで2歩下がる生活スタイルがすっかり定着の下山です。
マウスをカチカチやってるよりキーボードをパチパチやってるほうが好きです。（前フリ）

という訳で背景画像を3つの素材からCSSで作ってしまおうと・・・photoshopとか画像処理なんてしませんよ！

ご存知の通り、CSS3から1要素に複数の背景画像をしていできるようになりました。
例によってIE9以上です・・・（※確かCSS3をいくつかIE6～8でも有効にするCSS PIEてのがあります。）

demo

html

 背景を複数組み合わせてみるよ

CSS

.bgs {
	border:1px solid #ccc;
	background:url(img/logo.png) 270px 300px no-repeat, url(img/bg_heart.png) right bottom no-repeat, url(img/bg_gunya.png) -15px 100px no-repeat;
}

こんな感じで背景画像を複数指定できます。

backgroundプロパティに重ね順の上から指定していけばOKです。

background:一番上の背景, 2番目の背景, 3番目の背景, ・・・;

今回はショートハンドプロパティで指定しましたけど、関連プロパティ個別指定ももちろんOKです。

.bgs {
	background-image:url(img/logo.png), url(img/bg_heart.png), url(img/bg_gunya.png);
	background-position:270px 300px, right bottom, -15px 100px;
	background-repeat:no-repeat, no-repeat, no-repeat;
}

こんな感じで。

これを使うと、例えばヘッダー背景がページの端から端まであってヘッダーより下の背景でパターンなんか指定する場合、普通にhtmlとCSS書けば問題ないんですが、CSSフレームワークとか使ってるとなかなか面倒なんですよね。（↓こんな感じのデザイン）

ヘッダー部分の背景とボディ部分の背景をまとめてbodyに指定しちゃえば早いじゃない？

なので次回はCSS PIEのことでも書きます。