最終更新日 
backgroundプロパティ
backgroundプロパティは、背景に関するプロパティの値をまとめて記述するためのものです。それぞれの値を半角スペースで区切って記述します。
background-sizeの値を指定する場合は、「background-positionの値 / background-sizeの値」のように、半角スラッシュで区切ります。
値にボックスの指定がある場合は、1個の値ならbackground-originとbackground-clipの両方に共通の値となり、2個の値がある場合は、最初の値はbackground-origin、次はbackground-clipの値となります。
複数の画像を指定する場合には、画像ごとにプロパティをまとめ、カンマで区切ります。最初に指定した背景が1番上に配置され、次の背景は下に配置されていきます。
それ以外には、値の記述順に決まりはありません。プロパティの指定を省略することもできます。
なお、background-colorの値は、1番下のレイヤーになります。
CSS3での変更点
特にありません
| 初期値 | 適用先 | 継承 |
|---|---|---|
| 各プロパティの初期値 | すべての要素 | なし |
| 値 | 説明 |
|---|---|
| background-colorの値 | 背景色 |
| background-imageの値 | 背景画像 |
| background-repeatの値 | 背景画像の繰り返し方法 |
| background-positionの値 | 背景画像の表示位置 |
| background-clipの値 | 背景の描画領域 |
| background-sizeの値 | 背景画像のサイズ |
| background-originの値 | 背景画像の配置基点 |
| background-attachmentの値 | 背景画像のスクロール方法 |
サンプルコード
background: url("logo.png") no-repeat left top , url("back.png") repeat-x top / cover;
background: #ccc url("metal.jpg") top left / 100% auto no-repeat;
background: padding-box url("paper.jpg") white center;
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。