例
1宣言で異なる背景プロパティを設定します。
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
»それを自分で試してみてください 定義と使用法
背景簡略記述特性は、1宣言内のすべてのバックグラウンドプロパティを設定します。
設定できるプロパティは、以下のとおりです。背景色、背景画像、背景の位置、背景サイズ、背景リピート、背景起源、背景クリップ、およびバックグラウンド・アタッチメント。
上記の値の1は、例えば背景不足しているかどうかは関係ありませんします。＃FF0000のurl(smiley.gif) 。 許可されています。
| デフォルト値： | see individual properties |
|---|---|
| 継承されました： | no |
| アニメーション： | yes, see individual properties . Read about 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 |
Note: Internet Explorer 8の以前のバージョンでは、一つの要素に複数の背景画像をサポートしていません。
注：以下の各値に対して個別のブラウザのサポートを参照してください。
CSSの構文
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;注：速記宣言のプロパティの1はBGサイズのプロパティである場合、あなたは/使用する必要があります(slash) BG-positionプロパティ、例えばからそれを分離するためbackground:url(smiley.gif) 10pxの20ピクセル/は50pxは50px ; 背景画像になり、左から10ピクセル、上から20ピクセルに配置し、画像のサイズは、幅50ピクセル、50ピクセルの高さになります。
注：複数の背景画像のソースを使用している場合だけでなく、背景色をしたい、背景色のパラメータがリストの最後にする必要があります。
プロパティ値
| 値 | 説明 | 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 |
| 初期 | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | 3 |
| 受け継ぎます | その親要素からこのプロパティを継承します。 継承についての記事を読みます | 2 |
関連ページ
CSSチュートリアル： CSSの背景
CSS3チュートリアル： CSS3の背景
HTML DOMリファレンス： background property