Las cajas de los elementos HTML tienen una región de fondo que se puede rellenar, ya sea con un color, una imagen o un degradado. El fondo está formado por dos partes de la caja: la zona que ocupa el contenido y la zona del relleno. Por tanto, el fondo llega hasta la cara interior de los bordes. Por defecto, los navegadores web no muestran los fondos (son transparentes).
Los fondos se pueden establecer a cualquier elemento HTML. Esto significa que si se quiere indicar un color de fondo a todo un documento HTML, es tan sencillo como aplicar las propiedades adecuadas al elemento <body>. Los demás elementos se verán con el mismo fondo a menos que se indique lo contrario.
Para modificar el fondo de los elementos HTML existen 5 propiedades CSS específicas y una propiedad abreviada:
| Propiedad | Descripción |
|---|---|
background-color | Define el color de fondo. |
background-image | Define la imagen de fondo. |
background-repeat | Repetición de la imagen de fondo. |
background-attachment | Desplazamiento de la imagen de fondo. |
background-position | Posicionamiento de la imagen de fondo. |
background | Abreviatura de la imagen de fondo. |
La propiedad ‘background-color’
La propiedad background-color permite especificar un color sólido de fondo en la caja de un elemento HTML. Con esta propiedad no crean los colores degradados (rangos de colores ordenados). Los colores se introducen a través de 140 palabras clave o con los modelos de color RGB y HSL.
Lista de valores de background-color:
| Valor | Descripción |
|---|---|
| color | Un color válido. |
transparent | Indica un color transparente. |
inherit | Hereda el color del elemento padre. |
Ejemplos de colores válidos:
| Valor | Descripción |
|---|---|
red | Nombre propio. |
#ff0000 | Código hexadecimal. |
rgb(255, 0, 0) | Modelo RGB. |
hsl(0, 100%, 50%) | Modelo HSL. |
Vamos a ver algunos ejemplos:
.turquesa {
background-color: teal;
}
.marron {
background-color: brown;
}
.olivo {
background-color: olive;
}
Resultado:
Párrafo con fondo turquesa.
Párrafo con fondo marrón.
Párrafo con fondo verde olivo.
En estos tres ejemplos se ha añadido un relleno (padding) de 5 píxeles para hacer más visible la zona de aplicación de los fondos (contenido + relleno).
La propiedad ‘background-image’
El lenguaje CSS también permite indicar una imagen de fondo. Esto se hace con la propiedad background-image, que puede estar especificada de forma simultánea con un color sólido. Por tanto, los espacios que queden sin rellenar por la imagen indicada se verán del color indicado o transparente.
La imagen se especifica mediante una URL válida, que puede ser relativa o absoluta. Para especificar la URL se usa la función url(). Respecto a la ubicación de las imágenes, se recomienda crear una carpeta en el mismo directorio que los archivos CSS e indicar una URL relativa. Así, las imágenes del diseño se mantienen separadas del contenido, facilitando el mantenimiento.
Lista de valores de background-image:
| Valor | Descripción |
|---|---|
url() | Una URL válida. |
none | Indica que no debe tener imagen. |
inherit | Hereda la imagen del elemento padre. |
Ejemplo de código CSS:
.imagen {
background-image: url("/images/css/pattern-dark.png");
background-color: #282828;
}
Resultado:
Párrafo con imagen de fondo.
Tal y como se puede ver, además de una imagen se ha especificado un color sólido de fondo. Suele ser habitual indicarlo cuando se muestra una imagen de fondo; así, en caso de que la imagen no se pueda cargar, el navegador mostrará el color indicado, que debería ser lo más similar a la imagen. En este caso también se añade un borde exterior naranja para indicar el límite del fondo.
La imagen que se ha elegido es un patrón rayado que se puede repetir sin que quede roto, y no importa el hecho de que pueda verse solamente una parte. Si la imagen fuera demasiado grande para el fondo, se mostraría únicamente una parte coincidente con el tamaño del contenido sumado al relleno. Si la imagen es más pequeña, por defecto se repite en horizontal y en vertical.
Además de insertar imágenes, la propiedad background-image también tiene tres funciones para crear degradados de color. Con sus funciones permite diseñar degradados lineales, radiales y cónicos.
La propiedad ‘background-repeat’
Para controlar la repetición de las imágenes de fondo se usa la propiedad background-repeat. Una imagen se puede repetir en el eje horizontal, en el eje vertical, en ambos ejes, puede no repetirse, etc. Los valores de esta propiedad requieren una explicación detallada de cada una.
Lista de valores de background-repeat:
| Valor | Descripción |
|---|---|
repeat | La imagen se repite en ambos ejes. |
repeat-x | La imagen se repite en el eje horizontal. |
repeat-y | La imagen se repite en el eje vertical. |
space | La imagen se repite sin recortarse; se deja un espacio en blanco entre cada imagen, distribuidas de forma uniforme. |
round | La imagen se repite sin recortarse; las repeticiones se adaptan hasta ocupar el espacio completo. |
no-repeat | La imagen no se repite. |
La propiedad background-repeat admite dos parámetros, que hacen referencia al eje horizontal y al eje vertical. Si se especifica un único parámetro sirve de abreviatura para ambos ejes. Por ejemplo:
.selector {
background-repeat: no-repeat round;
}
Esto significa que en el eje horizontal debe repetirse la imagen, mientras que en el eje vertical se repiten la imagen hasta ajustarse.
La propiedad ‘background-attachment’
La propiedad background-attachment permite controlar la forma en la que se visualiza la imagen de fondo, es decir, permite decidir si la imagen debe permanecer fija cuando el usuario se desplaza en la ventana del navegador, o si la imagen se debe desplazar junto con la ventana.
Lista de valores de background-attachment:
| Valor | Descripción |
|---|---|
scroll | La imagen de fondo se desplaza. |
fixed | La imagen de fondo permanece fija. |
inherit | Hereda el desplazamiento del elemento padre. |
La propiedad ‘background-position’
Con CSS también se puede controlar la posición de las imágenes de fondo. Esto se consigue mediante la propiedad background-position. La posición se determina partiendo de la posición original de la imagen, situada en la esquina superior izquierda, y puede situarse en cualquier ubicación.
La propiedad background-position puede tener uno o dos parámetros. Si se introduce un parámetro se está indicando el desplazamiento horizontal; para el eje vertical se establece el 50% (centrado). Si se indica dos parámetros, el primero ajusta el eje horizontal y el segundo ajusta el eje vertical.
Los valores permitidos pueden ser un porcentaje, una unidad de longitud o las palabras clave left, center y right para el primer parámetro (eje horizontal) y top, center y bottom para el segundo parámetro (eje vertical). El valor por defecto de background-position es 0% 0%. Se admiten valores negativos y combinaciones de palabras clave con valores numéricos.
Las palabras clave que se han indicado son equivalentes a algunos porcentajes. En la siguiente tabla se muestran las equivalencias:
| Valor | Equivalencia |
|---|---|
top | 0% |
left | 0% |
center | 50% |
bottom | 100% |
right | 100% |
La propiedad ‘background’
La propiedad background es una abreviatura (shorthand) que permite indicar en una sola declaración los atributos de las propiedades específicas sobre fondos vistas hasta ahora. El orden en el que se introducen no es obligatorio, pero es una buena norma seguir el siguiente:
- Color (
background-color) - URL (
background-image) - Repetición (
background-repeat) - Desplazamiento (
background-attachment) - Posición (
background-position)
Por ejemplo:
.abreviatura {
background:
#282828
url("/images/css/pattern-dark.png")
repeat
scroll
0 0;
}
Resultado:
Párrafo con imagen de fondo insertada con
background.
En este último ejemplo, cada atributo se ha especificado en una nueva línea para facilitar la lectura, sobretodo en pantallas estrechas.
