CSS【 background 】7～背景に関するショートハンドプロパティ

background-colorプロパティやbackground-sizeプロパティなど、背景に関するプロパティは数多くありますが、backgroundプロパティで、それらの指定をまとめて行うことができます。
今回は、backgroundプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1～背景プロパティの種類とbackground-color
CSS【 background 】2～background-imageでレイヤーやグラデーションも
CSS【 background 】3～background-repeat、background-attachment
CSS【 background 】4～background-position
CSS【 background 】5～background-size
CSS【 background 】6～background-clip、background-origin
CSS【 background 】7～背景に関するショートハンドプロパティ（本ページ）

1. backgroundプロパティ

backgroundプロパティは、背景に関する各プロパティの指定をまとめて行うことができるショートハンドプロパティです。

backgroundプロパティで指定できるプロパティは、次の通りです。

▲目次へ戻る

2. sizeとposition、originとclip

backgroundプロパティは、ほとんどの内容については、指定したい値を、順番を気にせずに、半角スペースで区切って指定すればOKですが、次の2点だけ、特別なルールがあります。

sizeとpositionは、他のプロパティと違って複数の値を半角スペース区切りで指定できるため、このルールがないと、何の値かをブラウザが認識できなくなるので、上記のルール（position/size）が存在します。

originとclipは、値がどちらも３つのキーワード（border-box、padding-box、content-box）のみのため、このルールがないと、どのプロパティに対する値かをブラウザが認識できなくなるので、上記のルール（origin clip の順に指定）が存在します。

▲目次へ戻る

3. 背景画像を複数指定

各プロパティで指定した背景は、レイヤー構造となります。
画像やグラデーションを複数指定する場合は、上から順に画像が重なり、background-colorプロパティで指定した背景色は一番下のレイヤーとなります。

backgroundプロパティで画像等を複数指定する場合は、レイヤーごとにカンマ（,）で区切って指定し、最後のレイヤーだけbackground-colorを指定します。

次の3つの画像を、上から順に、上（img1.jpg）、中（img2.jpg）、下（img3.jpg）の順に重ねてみます。

　
ソースは次の通りです。

（CSS）
div#sample {
	margin:0;
	padding:2em;
	color:#FFF;
	font-weight:bold;
	height:15em;
	border-top: solid 25px rgba(255,255,255,.5);
	background:
	url(img/img1.jpg) no-repeat right 5px top 5px/auto padding-box border-box,
	url(img/img2.jpg) repeat-x -20px 5px/40px 40px border-box,
	url(img/img3.jpg) 0 0/15px border-box #FFD9D9;}

（HTML）
<div id="sample">
上：ヨット（img1.jpg）
中：カモメ（img2.jpg）
下：模様（img3.jpg）
</div>

▲目次へ戻る