Fondo de estilo Propiedad
Ejemplo
Dale estilo al fondo de un documento:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La propiedad de fondo establece o devuelve hasta ocho propiedades de fondo separadas, en forma abreviada.
Con esta propiedad, puede establecer/devolver uno o más de los siguientes (en cualquier orden):
- color de fondo
- imagen de fondo
- repetición de fondo
- archivo adjunto de fondo
- posición de fondo
- tamaño de fondo
- fondo-origen
- clip de fondo
Las propiedades anteriores también se pueden configurar con propiedades de estilo separadas. El uso de propiedades separadas es muy recomendable para autores no avanzados para una mejor controlabilidad.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: consulte el soporte de navegador individual para cada valor a continuación.
Sintaxis
Devuelve la propiedad de fondo:
object.style.background
Establezca la propiedad de fondo:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Valores de propiedad
| 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 |
Detalles técnicos
| Valor por defecto: | transparente ninguno repetir desplazamiento 0% 0% cuadro de relleno automático cuadro de borde |
|---|---|
| Valor de retorno: | Una cadena, que representa el fondo de un elemento. |
| Versión CSS | CSS1 + nuevas propiedades 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";
Ejemplo
Establecer un color de fondo para un documento:
document.body.style.backgroundColor = "red";
Ejemplo
Establecer una imagen de fondo para un documento:
document.body.style.backgroundImage = "url('img_tree.png')";
Ejemplo
Establezca una imagen de fondo para que no se repita:
document.body.style.backgroundRepeat = "repeat-y";
Ejemplo
Configure la imagen de fondo para que sea fija (no se desplazará):
document.body.style.backgroundAttachment = "fixed";
Ejemplo
Cambiar la posición de una imagen de fondo:
document.body.style.backgroundPosition = "top right";
Ejemplo
Devuelve los valores de propiedad de fondo de un documento:
document.body.style.background;
páginas relacionadas
Tutorial CSS: Fondo CSS
Tutorial CSS3: Fondos CSS3
Referencia CSS: propiedad de fondo