Los últimos tutoriales de desarrollo web
 

Style background Property

<Estilo de objeto

Ejemplo

Estilo del fondo de un documento:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.


Definición y Uso

Los conjuntos de fondo de propiedad o devoluciones hasta ocho propiedades de fondo independientes, de forma abreviada.

Con esta propiedad, se puede establecer / devolver uno o más de los siguientes (en cualquier orden):

  • color de fondo
  • imagen de fondo
  • background-repeat
  • background-attachment
  • background-position
  • fondo de tamaño
  • fondo-origen
  • fondo-clip

Las propiedades anteriores también se pueden configurar con propiedades de estilo separadas. El uso de propiedades separadas es muy recomendable para los autores no avanzados para una mejor capacidad de control.


Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
background 1.0 4.0 1.0 1.0 3.5

Nota: Consulte la ayuda del navegador individual para cada valor por debajo.


Sintaxis

Devolver la propiedad de fondo:

object .style.background

Establecer la propiedad de fondo:

object .style.background=" Valores de propiedad
Valor Descripción
color Establece el color de fondo de un elemento
image Establece la imagen de fondo de un elemento
repeat Establece cómo se repetirá una imagen de fondo
attachment Establece si la imagen de fondo se fija o se desplaza con la página
position Establece la posición de partida una imagen de fondo
size Establece el tamaño de una imagen de fondo
origin Establece el área de posicionamiento fondo
clip Establece el área de la pintura una imagen de fondo
initial Establece esta propiedad a su valor por defecto. Lea acerca inicial
inherit Hereda esta propiedad de su elemento padre. Lea acerca de heredar

Detalles técnicos

Valor por defecto: transparentes ninguna repetición de desplazamiento 0% 0% acolchado de caja automática frontera-box
Valor de retorno: Una cadena, que representa el fondo de un elemento
Versión CSS propiedades CSS1 + nuevos en CSS3

Más ejemplos

Ejemplo

Cambiar el fondo de un elemento DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Inténtalo tú mismo "

Ejemplo

Establecer un color de fondo para un documento:

document.body.style.backgroundColor = "red";
Inténtalo tú mismo "

Ejemplo

Establecer una imagen de fondo para un documento:

document.body.style.backgroundImage = "url('img_tree.png')";
Inténtalo tú mismo "

Ejemplo

Establecer una imagen de fondo a la no-repeat:

document.body.style.backgroundRepeat = "repeat-y";
Inténtalo tú mismo "

Ejemplo

Establecer la imagen de fondo que se fija (will not scroll) :

document.body.style.backgroundAttachment = "fixed";
Inténtalo tú mismo "

Ejemplo

Cambiar la posición de una imagen de fondo:

document.body.style.backgroundPosition = "top right";
Inténtalo tú mismo "

Ejemplo

Devolver los valores de las propiedades de fondo de un documento:

document.body.style.background;
Inténtalo tú mismo "

Páginas relacionadas

CSS tutorial: Antecedentes CSS

CSS3 tutorial: Fondos de CSS3

Referencia CSS: background property


<Estilo de objeto