CSS: Fondos

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 se puede crear 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 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. Así, esta propiedad 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 a 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.

← Artículo anterior
CSS: Contornos
Artículo siguiente →
CSS: Degradados