1 回の宣言で様々な background プロパティを設定します：
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Try it Yourself ❯
background ショートハンドプロパティは、1回の宣言で全ての background プロパティを設定します.
設定できるプロパティは次の通りです: background-color、background-image、background-position、background-size、background-repeat、background-origin、 background-clip、background-attachment
上記の値のうちの 1 つを省略しても問題ありません。例えば、background:#ff0000 url(smiley.gif); のような指定が可能です。
| デフォルト値： | 個別のプロパティを参照してください |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | yes, 個別のプロパティを参照してください. animatable を参照 Try it |
| バージョン： | CSS1 + new properties in CSS3 |
| JavaScript 構文： | object.style.background="red url(smiley.gif) top left no-repeat" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注: IE8 以前のバージョンは、1つの要素に複数の背景画像はサポートしていません。
注: 各ブラウザのサポートは、下の数字をご覧ください。
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
注: ショートハンドの宣言におけるプロパティの1 つが bg-size プロパティの場合、bg-position プロパティと区別するために /（スラッシュ） を使用しなければなりません。例えば、background:url(smiley.gif) 10px 20px/50px 50px; は、位置が左から 10 ピクセル、上から 20 ピクセルで、 画像の大きさは幅が 50 ピクセルで、高さが 50 ピクセルの背景画像になります。
注: 複数の背景画像のソースを使用しても背景色が必要な場合は、bg-color パラメータをリストの最後にする必要があります。
| 値 | 説明 | CSS |
|---|---|---|
| background-color | 使用する背景色を指定します | 1 |
| background-image | 使用する 1 以上の背景画像を指定します | 1 |
| background-position | 背景画像の位置を指定します | 1 |
| background-size | 背景画像のサイズを指定します | 3 |
| background-repeat | 背景画像をどのように繰り返すかを指定します | 1 |
| background-origin | 背景画像の配置エリアを指定します | 3 |
| background-clip | 背景画像の描画エリアを指定します | 3 |
| background-attachment | 背景画像を固定するか、またはページの残りの部分と一緒にスクロールするかを指定します | 1 |
| initial | プロパティにデフォルト値を設定します。initial を参照 | 3 |
| inherit | このプロパティは親要素を継承します。inherit を参照 | 2 |
CSS チュートリアル： CSS Background
CSS3 チュートリアル：CSS3 Backgrounds
HTML DOM リファレンス：background プロパティ