# Fondos en CSS: colores, degradados e imágenes por capas [Canonical HTML page](https://gradiently.design/es/guide/css-background-image) Una sola propiedad puede contener una foto, un tinte encima, una luz suave en una esquina y un color de reserva debajo. Cuando entiendes el orden de las capas, la mayoría de los efectos de fondo caben en una línea. ## The short version - La propiedad background de CSS puede contener varias capas separadas por comas, y la primera capa de la lista se pinta encima. - El color de fondo solo se puede definir una vez, en la última capa, y se ve por debajo de todas las imágenes y degradados. - En la abreviatura background, background-size debe ir después de background-position con una barra, como en center / cover. - Colocar una capa de degradado sobre una capa de imagen en una sola declaración es la forma más sencilla de teñir una foto para que el texto se lea. - Las imágenes definidas en CSS se descubren más tarde que los elementos img, así que una imagen principal importante puede necesitar una indicación de precarga. 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». | Propiedad individual | Qué controla | Valores habituales | | --- | --- | --- | | `background-color` | El color bajo todas las capas | `#0f0b1e`, `oklch(20% 0.05 290)` | | `background-image` | Imágenes y degradados, separados por comas | `url(photo.webp)`, `linear-gradient(…)` | | `background-position` | Dónde se coloca cada capa | `center`, `top right`, `50% 30%` | | `background-size` | Qué tamaño tiene cada capa | `cover`, `contain`, `200px auto` | | `background-repeat` | Si se repite en mosaico | `no-repeat`, `repeat`, `repeat-x` | | `background-attachment` | Si se desplaza con el elemento o con la ventana | `scroll`, `fixed`, `local` | | `background-origin` y `background-clip` | Desde qué caja empieza y a cuál se recorta | `padding-box`, `border-box`, `text` | Referencia completa en [la página de background de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background). ```css .hero { /* image | position / size | repeat | colour */ background: url("harbour.webp") center 30% / cover no-repeat #0f172a; } ``` La barra es obligatoria: el tamaño solo puede ir justo después de la posición. El color va al final y se ve mientras carga la imagen. ## 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. - Capa 1: luz rosa: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)` - Capa 2: luz azul: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)` - Capa 3: fondo índigo: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)` Tres capas mostradas por separado. Las dos primeras se desvanecen a transparente, así que el fondo se ve allí donde ellas no pintan. ```css .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; } ``` Las mismas tres capas apiladas en una sola declaración, la de arriba primero, con un color sólido de reserva al fondo. 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](https://gradiently.design/es/guide/css-radial-gradient) y [degradado de malla en CSS](https://gradiently.design/es/guide/css-mesh-gradient). ## 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. ```css .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; } ``` Oscuro a la izquierda, donde va el titular, y transparente a la derecha, donde debe verse la foto. Una cabecera web ancha con un titular sobre un fondo oscurecido de forma uniforme Una capa uniforme hace legible el texto oscureciendo todo por igual. La misma cabecera en la que solo el lado que queda detrás del titular es más tranquilo y oscuro Una capa direccional oscurece solo donde están las palabras y deja luminoso el resto de la escena. [Superposición de degradado](https://gradiently.design/es/guide/gradient-overlay) tiene más recetas de capas, y [texto sobre imagen](https://gradiently.design/es/guide/text-over-image) 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. ```css .card { background: url("grain.png") 0 0 / 200px 200px repeat, linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%); } ``` Un pequeño mosaico de grano repetido sobre un degradado cálido. Los ajustes de cada capa siguen a su imagen, así que el tamaño del mosaico no afecta al degradado. 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](https://gradiently.design/es/guide/css-gradient-text) para el patrón completo. ## Errores que conviene evitar ### Evita - Definir `background-size` y después la abreviatura, que lo restablece - Un color en cualquier capa que no sea la última - Ningún color de reserva, con lo que el texto no se lee mientras carga la imagen - Una foto enorme para una caja de 400 píxeles de ancho - Contenido importante solo en una imagen de fondo, invisible para los lectores de pantalla ### Haz - Escribe primero la abreviatura y después las propiedades individuales que la sobrescriben - Un solo color, al final de la lista - Un color de reserva cercano al tono medio de la imagen - Imágenes del tamaño de la caja, servidas en WebP o AVIF - Las imágenes con significado como `img` con texto alternativo; la decoración como fondo ## 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. ```html ``` El navegador toma el primer formato que admite. La precarga asegura que la imagen principal empiece a descargarse pronto. 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](https://gradiently.design/es/guide/css-gradient-performance) y [WebP frente a PNG y JPG](https://gradiently.design/es/guide/webp-images) 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. ## FAQ ### ¿Cómo añado una imagen de fondo en CSS? Usa `background: url("image.webp") center / cover no-repeat;` en el elemento, con un color de reserva al final por si la imagen tarda en cargar. ### ¿Cómo pongo un degradado sobre una imagen de fondo? Escribe primero el degradado y después la imagen en una sola declaración `background`, separados por una coma. La primera capa se pinta encima. ### ¿Puedo usar varios fondos en CSS? Sí. Separa las capas con comas; cada una puede tener su propia posición, tamaño y repetición, y solo la última puede incluir un color. ### ¿Qué diferencia hay entre background-size cover y contain? `cover` llena todo el elemento y recorta lo que sobra; `contain` muestra la imagen entera y puede dejar espacio vacío alrededor. ### ¿Por qué deja de funcionar mi background-size? La abreviatura `background` restablece todas las propiedades individuales que no menciona. Define `background-size` después de la abreviatura, o inclúyelo en ella tras la posición con una barra.