Fondos en CSS: colores, degradados e imágenes por capas

Un fondo en CSS es una pila de capas sobre un elemento. La propiedad background acepta una lista de imágenes y degradados separados por comas, pintados con el primero encima, más un único color abajo del todo. Es todo lo que necesitas para una foto de cabecera teñida, una luz suave sobre un degradado o una textura sobre un color de marca, sin elementos ni contenedores extra. Lo demás es saber cómo lee sus valores la abreviatura.

La abreviatura background, valor a valor

La abreviatura define hasta ocho propiedades individuales a la vez. Las que no incluyas vuelven a su valor por defecto, que es la causa más habitual de los errores del tipo «por qué ha desaparecido el tamaño de mi fondo».

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

Cómo se apilan las capas de fondo

Escribe las capas de arriba abajo, separadas por comas. Cada capa puede tener su propia posición, tamaño y repetición, indicados en el mismo orden en cada propiedad individual. Solo la última capa puede incluir un color. Piensa en ello como mirar hacia abajo a través de un montón de papel de calco.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Usa transparent en las paradas exteriores para que las luces se fundan con lo que haya debajo. Para las formas en sí, consulta degradado radial en CSS y degradado de malla en CSS.

Un degradado sobre una imagen de fondo

El fondo por capas más útil tiñe una foto para que se puedan leer las palabras de encima. Pon primero una capa de degradado y después la imagen. Un degradado oscuro donde va el texto y transparente en el resto conserva mucha más foto que una capa oscura uniforme.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

Superposición de degradado tiene más recetas de capas, y texto sobre imagen explica cuándo mover las palabras en lugar de oscurecer la imagen.

background-size, position y repeat

• cover llena la caja y recorta lo que sobresale. Lo adecuado para fotos y cabeceras a sangre.
• contain encaja la imagen entera dentro y deja huecos. Lo adecuado para logos e ilustraciones que no se pueden recortar.
• Combina cover con un background-position intencionado, como 50% 30%, para que el recorte mantenga a la vista la cara del sujeto o el producto.
• Las texturas en mosaico piden repeat y un tamaño fijo, por ejemplo 200px 200px, para que el grano sea igual en cualquier ancho de pantalla.
• background-attachment: fixed crea un efecto parallax en escritorio, pero muchos navegadores móviles lo ignoran, así que no dependas nunca de él.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

Hay otra propiedad individual que merece su sitio: background-clip: text recorta el fondo con la forma de las letras, que es como se hacen las letras con degradado en CSS. Resérvala para palabras grandes de titular, define un color sólido de reserva y consulta texto con degradado en CSS para el patrón completo.

Errores que conviene evitar

Imágenes de fondo adaptables y rápidas

image-set() permite que el navegador elija entre formatos o resoluciones, igual que srcset en un img. Y como las imágenes de fondo solo se descubren cuando se ha analizado el CSS, un fondo de cabecera puede llegar tarde; una indicación de precarga en el head lo soluciona.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

A menudo el fondo más rápido es el que no lleva ninguna imagen. Los degradados por capas no cuestan ninguna descarga, y un pequeño mosaico de grano añade textura por unos pocos kilobytes. Rendimiento de los degradados CSS y WebP frente a PNG y JPG explican los compromisos. Si prefieres no ajustar a mano la luz y el grano, un Mark de Gradiently te da un fondo terminado y distintivo al tamaño de cabecera web de 1920×1080, con el mismo aspecto que tus posts en redes.