background:背景に関する指定をまとめて行う

初期値 各プロパティの初期値
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 各プロパティの値に基づく
対応ブラウザ caniuseで確認

backgroundプロパティの説明

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

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

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プロパティの構文は以下の通りです。

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

CSS
.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;
}
HTML
<div class="samp_box">
	<div id="item">Item</div>
</div>
表示確認

backgroundに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える