Ejemplo
Set-una imagen de fondo para el <body> elemento:
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad Imagen de fondo establece una o más imágenes de fondo de un elemento.
El fondo de un elemento es el tamaño total del elemento, incluido el relleno y el borde (but not the margin) .
Por defecto, una imagen de fondo se coloca en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente.
Tip: Ajuste siempre un color de fondo que se utilizará si la imagen no está disponible.
Valor por defecto: | none |
---|---|
Heredado: | no |
animatable: | no. Read about animatable |
Versión: | CSS1 + new values in CSS3 |
la sintaxis de JavaScript: | object .style.backgroundImage="url(smiley.gif)" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Propiedad | |||||
---|---|---|---|---|---|
background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 y versiones anteriores no son compatibles con múltiples imágenes de fondo de un elemento.
sintaxis CSS
background-image:url|none|initial|inherit;
Valores de propiedad
Valor | Descripción |
---|---|
url(' URL ') | La URL de la imagen. Para especificar más de una imagen, separe las direcciones URL con una coma |
none | No aparecerá ninguna imagen de fondo. Esto es por defecto |
initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Establecer varias imágenes de fondo para el <body> elemento:
body {
background-image: url("img_tree.gif"),
url("img_flwr.gif");
background-color: #cccccc;
}
Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: Antecedentes CSS
CSS3 tutorial: Fondos de CSS3
Referencia HTML DOM: backgroundImage property