Fondos en CSS

Es posible que, buscando hacer un diseño más avanzado, en lugar de utilizar un color de fondo quieras utilizar imágenes. Para ello, CSS te proporciona la propiedad background-image, con la cuál puedes indicar imágenes de fondo o, como veremos más adelante, incluso gradientes o degradados de varios colores.

La propiedad background-image

En el caso de querer utilizar imágenes de fondo, como ya hemos dicho, utilizaremos la propiedad background-image y en el valor, el nombre de la imagen (o la dirección URL donde está alojada), siempre rodeada del texto url().

Propiedad	Valor	Significado
background-image	none	No utiliza ninguna imagen de fondo.
background-image	url("imagen.jpg")	Usa la imagen indicada como fondo. Las comillas no son obligatorias.

En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS que estamos escribiendo. Esto es lo que se llama una ruta relativa. En el caso de que se coloque la ruta completa, por ejemplo https://lenguajecss.com/assets/logo.svg, se accederá a la imagen alojada en esa dirección URL. Esto es lo que se llama ruta absoluta.

Ojo: En el caso de que no se encuentre la imagen o el valor de background-image se haya establecido a none, no se utilizará ninguna imagen de fondo, y en su lugar se mostrará el color establecido con background-color.

Gradientes o degradados

La propiedad background-image además de imágenes mediante la función url(), posee un mecanismo interesantísimo que permite establecer gradientes o degradados a partir de código. Hace muchos años, la única forma que teníamos de hacer esto, era crear el gradiente mediante un editor de imágenes y establecerlo como una imagen de fondo. Por suerte, actualmente hemos superado esa limitación.

Esencialmente, existen 3 funciones de gradientes: linear-gradient(), radial-gradient() y conic-gradient():

Basta con utilizar alguna de las siguientes funciones:

Función de gradiente	Significado
linear-gradient()	Define un gradiente lineal, o sea, en una dirección específica. Ver gradientes lineales
radial-gradient()	Define un gradiente radial, o sea, en forma de círculo o elipse. Ver gradientes radiales
conic-gradient()	Define un gradiente cónico, o sea, un cono visto superiormente. Ver gradientes cónicos

Las explicaremos un poco más adelante. Ten en cuenta que muchas de las siguientes propiedades de opciones de imágenes de fondo se pueden utilizar también con los gradientes o degradados.

Opciones de imagen de fondo

Una vez establecida una imagen de fondo con background-image, se puede personalizar la forma en la que se mostrará dicha imagen mediante propiedades como background-repeat, background-attachment o background-position, entre otras:

Propiedad	Descripción
background-repeat	Establece el modo en el que se repite la imagen de fondo de ser muy pequeña.
background-attachment	Indica si la imagen de fondo permanece fija o se desplaza al hacer scroll.
background-position	Establece una posición para la imagen de fondo, de modo que podemos moverla de sitio.
background-clip	Modo de relleno de la imagen de fondo. (Ver tema de modelo de cajas).
background-origin	Origen de la imagen de fondo si se utiliza background-clip. (Ver tema de modelo de cajas).
background-size	Establece un tamaño diferente a la imagen de fondo.

Analicemos cada una de las propiedades a continuación:

La propiedad background-repeat

La propiedad background-repeat especifica si la imagen se repetirá horizontalmente (repeat-x), si se repetirá verticalmente (repeat-y), si lo hará en ambas direcciones (repeat) o en ninguna (no-repeat). Por defecto, si no se indica nada, esta propiedad está ajustada en repeat.

Valor	Significado
repeat	Repite la imagen de fondo horizontal y verticalmente.
repeat-x	Repite la imagen de fondo sólo horizontalmente (eje x).
repeat-y	Repite la imagen de fondo sólo verticalmente (eje y).
space	Repite la imagen y rellena con espacio los huecos.
round	Repite la imagen y amplia cada repetición para ajustar.
no-repeat	La imagen de fondo no se repite.

Existen también dos valores interesantes, space y round, los cuales asumen implícitamente que se repite el fondo. En el caso de que tengamos una imagen de fondo que se repita varias veces en mosaico, space evita que se corte la imagen, introduciendo un espacio entre las repeticiones individuales.

Por su parte, round lo que hace es ajustar la imagen individual, de modo que la expande o contrae para ajustarla al espacio disponible. En ambos casos la repetición de los fondos nunca se mostrará cortada.

Siempre se podrá combinar en cada eje, con valores mixtos, por ejemplo, utilizando background-repeat: space round, lo que aplicará space al eje X y round al eje Y. Si sólo se especifica uno, se aplicará a ambos ejes.

La propiedad background-attachment

La propiedad background-attachment especificará si la imagen de fondo seguirá el desplazamiento del usuario al hacer scroll por la página, es decir, si el usuario al hacer scroll y bajar para ver el contenido de la página, la imagen de fondo de desplazará hacia arriba siguiendo el flujo normal de una página. Este comportamiento se consigue con la opción scroll, que es la que viene establecida por defecto.

Valor	Significado
scroll	Cuando hacemos scroll la imagen de fondo se desplaza.
fixed	Cuando hacemos scroll, la imagen de fondo permanece fija.

Por el contrario, si indicamos el valor fixed, la imagen de fondo se quedará fijada y no se moverá mientras el usuario se desplaza por la página, algo que puede ser útil en muchos escenarios.

La propiedad background-position

La propiedad background-position permite desplazar la imagen en la zona especificada por y por . Por defecto, esos valores son 0% 0%, y pueden especificarse tanto con unidades (porcentajes, píxels, etc...) como mediante palabras clave que representan zonas predefinidas (top, left, right, bottom y center).

Valor	Significado
	1 parámetro. Desplaza la imagen de fondo al punto (x, 50%).
	2 parámetros. Desplaza la imagen de fondo al punto (x, y).

Si sólo se especifica un valor, se tomará para el eje x, mientras que el valor del eje Y será automáticamente establecido a center (o 50%).

La propiedad background-clip

En CSS existen unas propiedades para indicar como cubrirá la imagen de fondo al elemento seleccionado para darle estilo. Estas propiedades son las siguientes:

Propiedad	Valor	Significado
background-clip	border-box | padding-box | content-box	Modo de relleno de la imagen de fondo
background-origin	border-box | padding-box | content-box	Origen del modo de relleno del fondo

La propiedad background-clip establece la forma en la que el color o la imagen de fondo cubrirá el elemento, mientras que la propiedad background-origin intenta posicionar el comienzo de la imagen de fondo, útil con imágenes. La primera utiliza border-box como valor por defecto, mientras que la segunda utiliza padding-box.

Ambas propiedades pueden tomar uno de los siguientes valores:

Valor	Significado
padding-box	La imagen o color de fondo cubrirá la zona del espaciado y contenido.
border-box	La imagen o color de fondo cubrirá la zona del borde, espaciado y contenido.
content-box	La imagen o color de fondo cubrirá sólo la zona del contenido.

Consejo: Una buena forma de darse cuenta del funcionamiento de estas propiedades es establecer un borde grueso punteado. Usando border-box la imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valor padding-box extenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedad content-box extenderá la imagen de fondo sólo en la zona del contenido.

La propiedad background-size

Una propiedad muy interesante es background-size, la cuál nos permite dar un tamaño a la imagen de fondo. Podemos ajustar tanto el tamaño de ancho como el de alto, e incluso tenemos algunas palabras clave predefinidas para obtener un resultado específico. Veamos la sintaxis:

Valor	Significado
	1 parámetro. Aplica un de (ancho × auto) a la imagen de fondo. Mantiene la proporción.
	2 parámetros. Aplica un de (ancho × alto) a la imagen de fondo. Hay que vigilar la proporción.

Por defecto, una imagen de fondo toma automáticamente el tamaño de la imagen (que podría ser demasiado grande, por ejemplo). Para no tener que modificar la imagen original de forma manual con un editor de imágenes, podemos utilizar esta propiedad y ajustarla a nuestro agrado mediante CSS:

.element {
  background-image: url(https://manz.dev/manz-logo.png);

  /* La imagen es de 320x320 píxels, la cambiamos a 48x48 */
  background-size: 48px 48px;
}

Ten en cuenta que al indicar el tamaño de ancho y alto de forma manual, hay que vigilar el tamaño original de la fotografía para evitar que se deforme y aparezca estirada o deformada porque el nuevo tamaño no manteniene la proporción de aspecto.

Ten en cuenta que con background-size puedes utilizar los siguientes valores:

Valor	Significado
auto	No escala la imagen. Utiliza el tamaño original. Es el valor por defecto.
unidad	Indicamos el tamaño específico que queremos usar (píxels o porcentaje, por ej.).
cover	Escala el ancho de la imagen de fondo al ancho del elemento.
contain	Escala el alto de la imagen de fondo al alto del elemento.

Los dos últimos valores, cover y contain, sólo pueden indicarse en el caso de que se especifique un sólo parámetro como valor en la propiedad background-size.

Fondos múltiples

Hasta ahora, hemos trabajado con CSS para establecer un sólo fondo mediante la propiedad background-image. Sin embargo, CSS permite establecer múltiples fondos separando por comas:

Propiedad	Descripción
background-image: url(imagen1), url(imagen2), ...	Establece varias imágenes de fondo en un elemento.

Hay que tener en cuenta que la primera imagen establecida es la que permanecerá al frente, la siguiente imagen añadida aparecerá detrás de la primera y así con todas las imágenes que se vayan indicando. Esto podemos utilizarlo a nuestro favor si colocamos una imagen en formato .png o .webp, las cuales soportan transparencias:

.element {
  background-image: url(manz.png), url(layer.webp), url(fondo.jpg);
  background-repeat: no-repeat, repeat-x, repeat-x;
}

Observa que al tener múltiples imágenes de fondo en la propiedad background-image, las propiedades derivadas de background-* pasan a ser múltiples también, ya que cada valor se aplica en orden a su respectiva imagen de fondo. En el caso de dejar sólo un valor, se aplicará a todas las imágenes de fondo:

.element {
  background-image: url(manz.png), url(layer.webp), url(fondo.jpg);
  background-repeat: no-repeat;   /* En este caso, las 3 imágenes no se repiten */
}

Ojo: Ten en cuenta que al igual que podemos indicar múltiples imágenes, también podemos indicar múltiples gradientes, que veremos en el próximo tema.

Atajo: background

Es posible establecer todas estas propiedades anteriores en una sola regla de CSS a modo de atajo, y así ahorrar mucho espacio en escribir las propiedades anteriores por separado. Aunque no es estrictamente obligatorio, se aconseja respetar el siguiente orden (acostumbrarse a usar el mismo orden es una buena práctica).

Existe un atajo clásico que no incorpora valores de propiedades como background-size o background-clip y que nos podemos encontrar aún por ahí, vamos a comentar ambos:

Atajo	Orden
Atajo clásico	background:
Atajo moderno	background:

Veamos un ejemplo de ambos atajos:

.element {
  /* Atajo clásico */
  background: #fff url(imagen.jpg) repeat-x scroll top left;

  /* Atajo moderno */
  background: #fff top left cover repeat-x padding-box border-box scroll url(imagen.jpg);
}

Recuerda que si alguno de los valores no los necesitamos, podemos simplemente omitirlo.

La propiedad opacity

Es posible utilizar la propiedad opacity para establecer una opacidad (transparencia total o parcial) sobre el elemento indicado. Hay que tener en cuenta que con opacity establecemos la opacidad al elemento en cuestión y todos sus elementos hijos. Si sólo deseamos aplicarla a ese elemento (y que no afecte al texto, por ejemplo), quizás sería mejor utilizar un canal alfa en el color de fondo.

La sintaxis de la propiedad opacity es la siguiente:

Propiedad	Valor	Significado
opacity		Establece una transparencia con un valor del 0 al 1.
opacity		Establece una transparencia con un valor del 0% al 100%.

Para indicar la opacidad podemos indicar tanto valores numéricos entre 0 (completamente transparente) y 1 (completamente visible), pasando por 0.25 o 0.75, así como valores porcentuales entre 0% (completamente transparente) y 100% (completamente visible):

.element {
  background-color: #ff0000;
  color: #ffffff;

  opacity: 0.5;
  opacity: 50%;   /* Equivalente a la anterior */
}

Como se puede ver en la imagen, el efecto del <div> recuadro rojo puede conseguirse tanto con opacity como usando un background: rgb(255, 0, 0, 50%), sin embargo, la diferencia está en que si tenemos texto en su interior, con opacity también se verá semitransparente, sin embargo con background con canal alfa solo afectará al fondo, por lo que el texto mantiene su opacidad original.

.element {
  background-color: rgb(255 0 0 / 50%);
  color: white;
}