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 ～ 背景に関するショートハンドプロパティ（本ページ）

目次

１．backgroundプロパティ
２．sizeとposition、originとclip
３．背景画像を複数指定

１．backgroundプロパティ

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

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

background-color	背景の色を指定するプロパティ 値：CSSの色指定（カラーネーム、RGB、HSL）、transparent（透明）、currentColor（文字色） デフォルト値：transparent（透明）
background-image	背景画像を指定するプロパティ 値：url(“画像のURL”) デフォルト値：none（背景画像なし）
background-repeat	画像の繰り返し方法を指定するプロパティ 値：repeat-x、repeat-y、repeat、no-repeat、space、round デフォルト値：repeat
background-attachment	スクロール時の背景画像の挙動を指定するプロパティ 値：fixed、scroll、local デフォルト値：scroll
background-position	画像表示位置を指定するプロパティ 値：数値（pxやemなどの単位を付ける）、%、top、right、bottom、left、center デフォルト値：0 0
background-size	画像表示サイズを指定するプロパティ 値：数値（pxやemなどの単位を付ける）、%、auto、contain、cover デフォルト値：auto
background-clip	背景の範囲を指定するプロパティ 値：border-box、padding-box、content-box デフォルト値：border-box
background-origin	画像配置の基準位置を指定するプロパティ 値：border-box、padding-box、content-box デフォルト値：padding-box
background	ショートハンドプロパティ 指定したい値を半角スペースで区切って指定する sizeはpositionとセットでposition/sizeという順番でスラッシュで区切って指定する originはclipの前に指定する 上記以外の指定は順不同

▲目次へ戻る

２．sizeとposition、originとclip

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

●sizeを指定する場合は、必ずpositionとセットで、「position/size」という形で指定します。
　（positionは、単独で指定できます。）

●originとclipを両方指定する場合は、「origin clip」の順番に指定します。
　（どちらか１つのみ指定する場合は、両方が同じ値となります。）

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

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

▲目次へ戻る

３．背景画像を複数指定

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

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

次の３つの画像を、上から順に、上（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>

▲目次へ戻る