Style background 属性

定義と使用方法

background 属性は短縮形式で設定または返却し、最大で8つの個別の背景属性を設定できます。

この属性を使用して、以下のいずれか一つまたは複数を設定/返却できます：

DOM 属性 CSS 属性
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

上記の属性もそれぞれのスタイル属性を使用して設定できます。非上級ユーザーは、より良い制御を得るために、それぞれの属性を使用することをお勧めします。

さらに参照してください：

CSS チュートリアル：CSS 背景

CSS3 チュートリアル：CSS3 背景

CSS 参考マニュアル：background 属性

例

ドキュメントの背景のスタイルを設定します：

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

亲自试一试

ページの下部にはさらに多くの TIY 実例があります。

文法

background 属性の返り値：

object.style.background

background 属性の設定：

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

属性値

値 説明
color 要素の背景色を設定します。
image 要素の背景画像を設定します。
repeat 背景画像の繰り返し方法を設定します。
attachment 背景画像が固定かページのスクロールに従うかを設定します。
position 背景画像の起始位置を設定します。
size 背景画像のサイズを設定します。
origin 背景定位範囲を設定します。
clip 背景画像の描画範囲を設定します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的な詳細

デフォルト値： transparent none repeat scroll 0% 0% auto padding-box border-box
返り値： 要素の背景を示す文字列。
CSS バージョン： CSS1 + CSS3 での新しいプロパティ

さらに多くの例

例 2

変更 DIV 元素の背景：

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

亲自试一试

例子 3

为文档设置背景颜色：

document.body.style.backgroundColor = "red";

亲自试一试

例子 4

为文档设置背景图像：

document.body.style.backgroundImage = "url('img_tree.png')";

亲自试一试

例子 5

将背景图像设置为不重复：

document.body.style.backgroundRepeat = "repeat-y";

亲自试一试

例子 6

将背景图像设置为固定（不会滚动）：

document.body.style.backgroundAttachment = "fixed";

亲自试一试

例子 7

更改背景图像的位置：

document.body.style.backgroundPosition = "top right";

亲自试一试

例子 8

返回文档的背景属性值：

document.body.style.background;

亲自试一试

浏览器支持

background 是 CSS1 (1996) 特性。

所有浏览器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 支持

注释

CSS3 (1999) 中添加了三个新属性：