CSS背景プロパティ
例
1つの宣言で異なる背景プロパティを設定します。
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
定義と使用法
プロパティは、次のbackground
略記プロパティです。
上記の値のいずれかが欠落しているかどうかは関係ありません。例:background:#ff0000 url(smiley.gif); 許可されています。
デフォルト値: | 個々のプロパティを参照してください |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい、個々のプロパティを参照してください。アニメート可能について読む |
バージョン: | CSS1 + CSS3の新しいプロパティ |
JavaScript構文: | object .style.background = "red url(smiley.gif)左上の繰り返しなし" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注:以下の各値については、個々のブラウザーのサポートを参照してください。
CSS構文
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ピクセルになります。
注:複数のbackground-imageソースを使用しているが、background-colorも必要な場合は、background-colorパラメーターをリストの最後に置く必要があります。
プロパティ値
Value | Description | CSS |
---|---|---|
background-color | Specifies the background color to be used | 1 |
background-image | Specifies ONE or MORE background images to be used | 1 |
background-position | Specifies the position of the background images | 1 |
background-size | Specifies the size of the background images | 3 |
background-repeat | Specifies how to repeat the background images | 1 |
background-origin | Specifies the positioning area of the background images | 3 |
background-clip | Specifies the painting area of the background images | 3 |
background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
initial | Sets this property to its default value. Read about initial | 3 |
inherit | Inherits this property from its parent element. Read about inherit | 2 |
関連ページ
HTML DOMリファレンス:背景プロパティ