CSS background属性
例
div要素内で複数の背景画像を設定(およびそれらの位置を指定)する例:
body
{
background: #0080FF url('smiley.gif') no-repeat fixed center;
}
試してみる »
ブラウザサポート
表の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
| 属性 | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
すべての主要ブラウザはbackgroundプロパティをサポートしています。
注意:IE8以前のバージョンは、1つの要素に複数の背景画像をサポートしていません。
注意:IE7以前のバージョンは「継承」の値をサポートしていません。 IE8では定義が必要です。!DOCTYPE。IE9は「継承」をサポートしています。
タグの定義と使用説明
背景の省略プロパティは、1つの宣言で全ての背景プロパティを設定できます。
設定できるプロパティは次のとおりです:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment および background-image。
各値はスペースで区切り、順序は問いません。一部の値だけでも構いません。例:background:#FF0000 URL(smiley.gif);は許可されています。
| デフォルト値: | 個々のプロパティを参照してください。 |
|---|---|
| 継承: | no |
| バージョン: | CSS1+ CSS3の新しいプロパティ |
| JavaScript 構文: | object object.style.background="red url(smiley.gif) top left no-repeat" |
構文
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
| 值 | 説明 | CSS |
|---|---|---|
| background-color | 使用する背景色を指定します。 | 1 |
| background-position | 背景画像の位置を指定します。 | 1 |
| background-size | 背景画像のサイズを指定します。 | 3 |
| background-repeat | 背景画像の繰り返し方法を指定します。 | 1 |
| background-origin | 背景画像の位置指定領域を指定します。 | 3 |
| background-clip | 背景画像の描画領域を指定します。 | 3 |
| background-attachment | 背景画像を固定するか、ページの他の部分と一緒にスクロールするかを設定します。 | 1 |
| background-image | 使用する1つ以上の背景画像を指定します。 | 1 |
関連記事
CSS チュートリアル:CSS 背景
CSS3 チュートリアル:CSS3 背景
その他の拡張