今回はプロパティの1つの「background」について紹介します。
backgroundはWebサイトを作る際にほぼ必ず使用することになるので、
しっかり学んでおきましょう。

backgroundプロパティとは？

div {
    background:#ccc url("../img/image.png") no-repeat;
} 

backgroundプロパティとは、背景に関する指定をまとめて行う際に使用します。

background-clip、background-color、background-image、background-origin、
background-position、background-repeat、background-size、background-attachment
を単一の宣言で設定できる一括指定できます。

また、指定の順序は問われず、必要のない指定は省略可能です。(省略したものは初期値になる)

注意事項

ちなみに一括指定ではなく1つ1つ個別指定もできますが、個別指定したあとに
一括指定のbackgroundを使用すると、個別指定した部分を省略していた場合、
その指定が初期値にリセットされてしまうので注意。

また、その特性を逆に利用して、画像と色両方指定されているものを
色だけ指定することで画像指定を消し色指定のみにできる。

//これはOK
div {
    background:url("../img/image.png") no-repeat;
	background-color:#ccc;
} 


/*↓こうすると最初に指定した「background-color:#ccc;」が、
   次の「background」で初期値に戻されてしまう。*/
div {
	background-color:#ccc;
    background:url("../img/image.png") no-repeat;
}


/*↓こうすると最初の指定でdiv全体に背景(画像+色)のスタイルが適用されるが、
   whiteのclassがついてるものは画像指定が消え、背景色のみの指定になる。*/
div {
	background-color:#ccc;
    background-image:url("../img/image.png");
}
.white {
	background:#fff;
}

background-color

div {
    background-color:#ccc;
} 

background-colorは、背景色を指定する際に使用します。
初期値はtransparent(透明)です。
色指定の値には16進法で指定することが多いです。

background-image

div {
    background-image:url("../img/image.png");
} 

background-imageは、背景画像を指定する際に使用します。
初期値はnone(非表示)です。

背景画像はURLで指定します。
ただし、スタイルシート部分を外部ファイルにしている場合には、
HTMLファイルから見た相対パスではなく、 外部スタイルシートファイルからの
相対パスで指定しなくてはならないので注意しましょう。

background-repeat

div {
    background-image:url("../img/image.png");
	background-repeat:no-repeat;
} 

background-repeatは、背景画像のリピートの仕方を指定する際に使用します。
指定できる値はrepeat、repeat-x、repeat-y、no-repeatの4つです。

repeat

縦横に背景画像を繰り返して表示します。これが初期値です。

repeat-x

横方向にのみ背景画像を繰り返して表示します。

repeat-y

縦方向にのみ背景画像を繰り返して表示します。

no-repeat

背景画像を一回だけ表示して繰り返しません。

background-position

div {
    background-image:url("../img/image.png");
	background-repeat:no-repeat;
	background-position: right bottom;
} 

background-positionは、背景画像の表示開始位置を指定するプロパティです。
値にはpxや%などの数値での指定やtop、leftなどのキーワードの指定があります。

背景画像の表示開始位置をpxや%などの数値で指定する場合には、
値を横方向・縦方向の順にスペースで区切って指定してください。

キーワード指定

left,center,rightや、top,center,bottomといった位置を表すキーワードで指定します。
この指定方法はそれぞれ、0%、50%、100%と指定しているのと同じです。

数値指定

marginなどを指定するように、pxや%などの様々な単位を付けた数値で指定できます。
また、数値にはマイナスの値(-10%など)を指定することもできます。

background-attachment

div {
    background-image:url("../img/image.png");
	background-repeat:no-repeat;
	background-attachment: fixed;
} 

background-attachmentは、画面をスクロールする際、 背景画像をその位置に
固定されたままにするか、スクロールに伴って移動するかどうかを指定します。

scroll

スクロールに伴って、背景画像も移動します。
これが初期値です。

fixed

背景画像の位置が固定され、スクロールしても動かなくなります。
パララックスデザインなどで使用されたりします。

background-size

div {
    background-image:url("../img/image.png");
	background-repeat:no-repeat;
	background-size: contain;
} 

background-sizeは、背景画像のサイズを指定する際に使用します。
値にはpxや%などの数値での指定やキーワードの指定があります。

数値で指定する場合、値を2つ指定すると、それぞれ指定した順に幅と高さを表します。
１つだけ指定した場合には、もう１つはautoと解釈されます。
また、負の値を指定することはできません。

auto

自動的に算出される（初期値）

contain

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

数値指定

widthなどを指定するように、pxや%などの様々な単位を付けた数値で指定できます。

background-clip

div {
    background-image:url("../img/image.png");
	background-repeat:no-repeat;
	background-clip: padding-box;
} 

background-clipは、要素の背景色と背景画像の描画領域を指定します。

border-box

背景の描画領域を、ボーダーの外側の端までとします。
これが初期値です。

padding-box

背景の描画領域を、パディングボックスの外側の端までとします。

content-box

背景の描画領域を、コンテンツボックスの外側の端までとします。
【訳注: コンテンツボックスとは余白の領域を含まない、要素の内容が表示される領域の事です】

background-origin

div {
    background-image:url("../img/image.png");
	background-repeat:no-repeat;
	background-origin: padding-box;
} 

background-originは背景配置領域を決めます。
背景配置領域はCSSのbackground-imageプロパティで指定された画像の原点の位置です。
background-attachmentがfixedのときはbackground-originは無視されるので注意。

border-box

背景はボーダー境界の外側まで引き伸ばされます。
これが初期値です。

padding-box

ボーダーの下には背景が描かれません。
（背景はパディング境界の外側まで引き伸ばされます）

content-box

背景はコンテンツボックスの内部に描かれます。