Imagen de fondo (background-image)

En ocasiones será necesario crear fondos algo más complejos o sofisticados que aquellos generados mediante un simple color. CSS ofrece la posibilidad de utilizar una imagen para ello. Esta propiedad es aplicable a cualquier elemento HTML.

Existe la posibilidad de definir un color de fondo y una imagen a la vez. En este caso la imagen se mostrará encima del color, por lo que éste último únicamente se mostrará en caso de que la imagen sea transparente.

El siguiente ejemplo muestra una imagen como fondo de toda la página:

body {
body { background-image: url("imagenes/fondo.png") }
}

Las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa. Suele ser recomendable crear una carpeta de imágenes que se encuentre en el mismo directorio que los archivos CSS y que almacene todas las imágenes utilizadas en el diseño de las páginas.

Así, las imágenes correspondientes al diseño de la página se mantienen separadas del resto de imágenes del sitio y el código CSS es más sencillo (por utilizar URL relativas) y más fácil de mantener (por no tener que actualizar URL absolutas en caso de que se cambie la estructura del sitio web).

Imágenes demasiado grandes o demasiado pequeñas

Si la imagen que se quiere mostrar es demasiado grande para el fondo del elemento, solamente se muestra la parte de imagen comprendida en el tamaño del elemento.

Si la imagen es más pequeña que el elemento, CSS la repite horizontal y verticalmente hasta llenar el fondo del elemento.

Este comportamiento es útil para establecer un fondo complejo a una página web entera. El siguiente ejemplo utiliza una imagen muy pequeña para establecer un fondo complejo a toda una página:

body {
body { background-image: url("imagenes/fondo.gif") }
}

Imagen original:

Resultado:

Con una imagen muy pequeña (y que por tanto, se puede descargar en muy poco tiempo) se consigue cubrir completamente el fondo de la página, con lo que se consigue un gran ahorro de ancho de banda.


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO