Atributo de estilo de fondo

Definición y uso

background El atributo se configura o retorna en forma abreviada hasta ocho atributos de fondo individuales.

A través de este atributo, puede configurar/retornar una o más de las siguientes opciones (en cualquier orden):

Atributo de DOM Atributo de 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 教程：Fondo de CSS

CSS3 教程：CSS3 背景

CSS 参考手册：background 属性

实例

设置文档的背景的样式：

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

Prueba personalmente

页面下方有更多 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 + new properties in CSS3

更多实例

例子 2

更改 DIV 元素的背景：

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

Prueba personalmente

Ejemplo 3

Establece el color de fondo del documento:

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

Prueba personalmente

Ejemplo 4

Establece la imagen de fondo del documento:

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

Prueba personalmente

Ejemplo 5

Establece la imagen de fondo como no repetida:

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

Prueba personalmente

Ejemplo 6

Establece la imagen de fondo como fija (no se desplazará):

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

Prueba personalmente

Ejemplo 7

Cambia la posición de la imagen de fondo:

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

Prueba personalmente

Ejemplo 8

Devuelve el valor del atributo de fondo del documento:

document.body.style.background;

Prueba personalmente

Compatibilidad del navegador

background Es una característica de CSS1 (1996).

Todos los navegadores lo soportan completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Soporte Soporte Soporte Soporte Soporte Soporte

Comentarios

CSS3 (1999) agregó tres nuevas propiedades: