スタイルの背景プロパティ
例
ドキュメントの背景のスタイルを設定します。
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
backgroundプロパティは、最大8つの個別のbackgroundプロパティを省略形で設定または返します。
このプロパティを使用すると、次の1つ以上を（任意の順序で）設定/返すことができます。
- 背景色
- 背景画像
- 背景-繰り返し
- 背景-添付ファイル
- 背景位置
- 背景サイズ
- 背景-起源
- 背景クリップ
上記のプロパティは、個別のスタイルプロパティで設定することもできます。制御性を向上させるために、上級者以外の作成者には、個別のプロパティを使用することを強くお勧めします。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注：以下の各値については、個々のブラウザーのサポートを参照してください。
構文
背景プロパティを返します。
object.style.background
背景プロパティを設定します。
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
プロパティ値
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
| デフォルト値： | 透明なし繰り返しスクロール0％0％自動パディングボックスボーダーボックス |
|---|---|
| 戻り値： | 要素の背景を表す文字列 |
| CSSバージョン | CSS1 + CSS3の新しいプロパティ |
その他の例
例
DIV要素の背景を変更します。
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
例
ドキュメントの背景色を設定します。
document.body.style.backgroundColor = "red";
例
ドキュメントの背景画像を設定します。
document.body.style.backgroundImage = "url('img_tree.png')";
例
背景画像を繰り返しなしに設定します。
document.body.style.backgroundRepeat = "repeat-y";
例
背景画像を固定するように設定します（スクロールしません）：
document.body.style.backgroundAttachment = "fixed";
例
背景画像の位置を変更します。
document.body.style.backgroundPosition = "top right";
例
ドキュメントの背景プロパティ値を返します。
document.body.style.background;
関連ページ
CSSチュートリアル：CSSの背景
CSS3チュートリアル：CSS3の背景
CSSリファレンス：背景プロパティ