background：要素の背景に関する指定をまとめて行う

backgroundプロパティの説明

CSSのbackgroundプロパティは、背景に関するスタイルを一括で指定するショートハンド・プロパティです。背景色や背景画像を指定する祭に、各プロパティを個別に用意することなく同時に記述できます。

backgroundでは、以下のプロパティの値を操作できます。複数の値を指定する場合は、半角スペースで区切って列記します。

• background-attachment：背景のスクロール指定
• background-clip：背景の拡張範囲指定
• background-color：背景色の指定
• background-image：背景画像の指定
• background-origin：背景の配置基準指定
• background-position：背景の位置指定
• background-repeat：背景の繰り返し指定
• background-size：背景の寸法指定

backgroundに指定できる値

<attachment>

背景をスクロールに合わせて移動するか固定するかを指定します。background-attachmentで使用できる値を指定して下さい。

<box>

背景を表示する領域や開始の基点を指定します。background-originおよびbackground-clipで使用できる値を指定して下さい。

<background-color>

背景の色を指定します。background-colorで使用できる値を指定して下さい。

<bg-image>

背景に表示する画像を指定します。background-imageで使用できる値を指定して下さい。

<position>

背景画像の表示位置を指定します。background-positionで使用できる値を指定して下さい。

<repeat-style>

背景画像の繰り返しを指定します。background-repeatで使用できる値を指定して下さい。

<bg-size>

背景画像の寸法を指定します。background-sizeで使用できる値を指定して下さい。

backgroundの使い方とサンプルコード

backgroundプロパティの構文は以下の通りです。

/* <background-color>値 */
background: red;
background: #ff0000;

/* <bg-image>値 */
background: url("bg.png");

/* 複数の値 */
background: red padding-box;
background: url("bg.png") repeat-x;
background: url("bg.png") center/50% no-repeat;

/* グローバル値 */
background: inherit;
background: initial;
background: revert;
background: unset;

backgroundの実例

backgroundプロパティを使うメリットは、複数の値を同時に編集できることです。以下の例では、親子関係の要素にそれぞれ別の背景を指定した場合のスタイルを確認できます。

<div class="samp_box">
	<div id="item">Item</div>
</div>

.samp_box {
	padding: 20px;
	border: 5px dashed #999;
	background: #0cf content-box;
}
#item {
	width: 150px;
	height: 100px;
	margin: 20px auto;
	padding: 10px;
	border: 10px dashed #039;
	background: url(/images/sample_bg_stripe.png) repeat;
	text-align: center;
}