| Definición | Establece la imagen de fondo de un elemento |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | none |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/colors.html#propdef-background-image |
Ejemplos de uso
La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde.
Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL relativas/absolutas.
La URL de la imagen que se quiere mostrar se incluye dentro de los paréntesis de la palabra url(). De forma opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles.
div {
background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
}
h1, h2, h3 {
background-image: url("imagenes/fondo.png");
}
ul li {
background-image: url('../comun/imagenes/icono.gif');
}Si la imagen de fondo es más grande que el sitio disponible para mostrarla, el navegador sólo muestra la parte visible que resulta de colocar la esquina superior izquierda de la imagen en la esquina superior izquierda del espacio que ocupa el elemento:
Por el contrario, si la imagen es más pequeña que el sitio disponible, el navegador repite la misma imagen en todas las direcciones hasta cubrir completamente el espacio que ocupa el elemento:
Sobre un mismo elemento se puede establecer de forma simultánea una imagen de fondo y un color de fondo. Este comportamiento es habitual en algunos elementos, como por ejemplo el fondo de la propia página web.
Si un mismo elemento tiene definida una imagen y un color de fondo, la imagen tiene prioridad. El color de fondo se muestra en las zonas transparentes de la imagen y en las zonas que no están cubiertas por la imagen.
Se recomienda establecer un color de fondo siempre que se utilice una imagen de fondo. Como las imágenes se indican mediante URL y el navegador las tiene que descargar, es posible que se produzcan errores y la descarga de la imagen no se pueda realizar.
Por lo tanto, si se establece un color de fondo junto con la imagen de fondo y se produce un error que impide mostrar la imagen, el navegador mostrará el color de fondo establecido. Por este motivo, el color de fondo debe ser similar a la imagen utilizada.
El estándar CSS no permite modificar el tamaño con el que se muestra la imagen de fondo. Sin embargo, es posible modificar opciones como si la imagen se repite o no (background-repeat), si la imagen permanece fija o no (background-attachment) y modificar su posición por defecto (background-position).
Por último, no se pueden establecer dos o más imágenes diferentes sobre un mismo elemento. Si se quieren mostrar dos imágenes diferentes como fondo de una página web, se puede establecer la primera imagen sobre el selector html y la segunda imagen sobre el selector body:
html {
background-image: url("imagenes/primera_imagen.png");
}
body {
background-image: url("imagenes/segunda_imagen.png");
}Para que este último ejemplo sea realmente útil, es imprescindible utilizar al menos la propiedad background-repeat.