Tutorial CSS: Propiedades de fondo

Background-color y transparencias con RGBA

El color de fondo es una de las propiedades más básicas y útiles en CSS para estilizar elementos HTML. La propiedad background-color nos permite definir un color sólido para el fondo de cualquier elemento, desde toda la página hasta pequeños componentes como botones o cajas de texto.

Colores básicos en CSS

Para establecer un color de fondo, podemos utilizar diferentes formatos:

• Nombres de colores predefinidos:

.box {
  background-color: red;
}

• Valores hexadecimales (formato #RRGGBB):

.box {
  background-color: #ff0000; /* Rojo */
}

• Formato RGB (Red, Green, Blue):

.box {
  background-color: rgb(255, 0, 0); /* Rojo */
}

Cada uno de estos métodos produce el mismo resultado visual: un fondo rojo sólido. Sin embargo, cuando necesitamos controlar la transparencia de un color, necesitamos utilizar formatos que soporten un canal alfa.

Transparencias con RGBA

El formato RGBA extiende el formato RGB añadiendo un cuarto valor que controla la opacidad (canal alfa). Este valor va de 0 (completamente transparente) a 1 (completamente opaco).

La sintaxis básica es:

background-color: rgba(red, green, blue, alpha);

Donde:

• red, green, blue: Valores entre 0 y 255 que definen la intensidad de cada color primario
• alpha: Valor entre 0 y 1 que define la opacidad

Ejemplos prácticos con RGBA

• Rojo semitransparente (50% de opacidad):

.overlay {
  background-color: rgba(255, 0, 0, 0.5);
}

• Negro con diferentes niveles de transparencia:

.shadow-light {
  background-color: rgba(0, 0, 0, 0.2); /* Negro con 20% de opacidad */
}

.shadow-medium {
  background-color: rgba(0, 0, 0, 0.5); /* Negro con 50% de opacidad */
}

.shadow-strong {
  background-color: rgba(0, 0, 0, 0.8); /* Negro con 80% de opacidad */
}

Aplicaciones prácticas de RGBA

Superposiciones (overlays)

Una aplicación común de los colores semitransparentes es crear capas de superposición sobre imágenes o contenido:

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Capa oscura semitransparente */
}

Este código crea un efecto de oscurecimiento sobre una imagen, muy útil para mejorar la legibilidad del texto que se coloca encima.

Efectos de hover con transición

Podemos combinar RGBA con transiciones para crear efectos de hover elegantes:

.button {
  background-color: rgba(65, 105, 225, 0.7); /* Azul real semitransparente */
  padding: 10px 20px;
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: rgba(65, 105, 225, 1); /* Azul real completamente opaco */
}

Este código crea un botón que se vuelve más opaco cuando el usuario pasa el cursor por encima, creando un efecto visual sutil pero efectivo.

Transparencia con hexadecimal y notación moderna

CSS también permite añadir transparencia a los colores hexadecimales añadiendo dos dígitos adicionales para el canal alfa:

.box {
  background-color: #ff0000ff; /* Rojo completamente opaco */
  background-color: #ff000080; /* Rojo con 50% de opacidad */
  background-color: #ff000000; /* Rojo completamente transparente */
}

Donde los dos últimos dígitos representan el valor alfa en hexadecimal (00 a ff).

Función color() y notaciones modernas

En CSS moderno, también podemos utilizar la función color() con diferentes espacios de color:

.modern-box {
  /* Color en espacio sRGB con transparencia */
  background-color: color(srgb 1 0 0 / 0.5); /* Rojo al 50% de opacidad */
}

Consideraciones de compatibilidad

Aunque RGBA tiene un soporte excelente en todos los navegadores modernos, es importante tener en cuenta que:

• Para navegadores muy antiguos (IE8 y anteriores), es recomendable proporcionar un color de respaldo sin transparencia:

.box {
  background-color: #ff0000; /* Fallback para navegadores antiguos */
  background-color: rgba(255, 0, 0, 0.5); /* Para navegadores modernos */
}

Combinando colores de fondo con otros elementos

La transparencia es especialmente útil cuando queremos que el fondo de un elemento permita ver parcialmente lo que hay debajo:

.card {
  background-color: rgba(255, 255, 255, 0.8); /* Blanco semitransparente */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Este código crea una tarjeta con fondo blanco semitransparente que permite ver sutilmente el contenido que está debajo, creando un efecto de vidrio esmerilado.

Degradados de transparencia

Podemos combinar RGBA con gradientes para crear efectos de desvanecimiento:

.fade-box {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),    /* Transparente arriba */
    rgba(0, 0, 0, 0.7)   /* Negro semitransparente abajo */
  );
  height: 200px;
}

Este código crea un degradado vertical que va desde completamente transparente en la parte superior hasta un negro semitransparente en la parte inferior, ideal para superposiciones de texto sobre imágenes.

Consejos prácticos para usar transparencias

• Contraste: Asegúrate de que el texto sobre fondos semitransparentes mantenga suficiente contraste para ser legible.
• Rendimiento: El uso excesivo de transparencias puede afectar al rendimiento en dispositivos de gama baja.
• Consistencia: Mantén valores de transparencia consistentes en toda tu interfaz para crear una experiencia visual coherente.

La combinación de colores y transparencias con RGBA es una herramienta poderosa para crear interfaces modernas y atractivas, permitiéndote controlar no solo el color sino también cómo interactúa visualmente con los elementos que están debajo.

Background-image y control de repetición con background-repeat

Mientras que background-color nos permite establecer un color sólido como fondo, la propiedad background-image nos da la posibilidad de utilizar imágenes para crear fondos más elaborados y visualmente atractivos en nuestros elementos HTML.

Uso básico de background-image

La sintaxis básica para establecer una imagen de fondo es:

.element {
  background-image: url('ruta-a-la-imagen.jpg');
}

Esta propiedad acepta diferentes valores:

• URLs que apuntan a archivos de imagen:

.hero {
  background-image: url('images/banner.jpg');
}

• Múltiples imágenes separadas por comas (veremos esto con más detalle en secciones posteriores):

.element {
  background-image: url('imagen1.png'), url('imagen2.png');
}

• Gradientes generados mediante funciones como linear-gradient:

.gradient-box {
  background-image: linear-gradient(to right, #f6d365, #fda085);
}

Comportamiento predeterminado de las imágenes de fondo

Por defecto, cuando aplicamos una imagen de fondo a un elemento:

1. La imagen se repite tanto horizontal como verticalmente para cubrir todo el elemento
2. La imagen se posiciona en la esquina superior izquierda del elemento
3. La imagen mantiene su tamaño original

Este comportamiento predeterminado puede no ser siempre el deseado, especialmente cuando trabajamos con imágenes grandes o patrones específicos.

Control de repetición con background-repeat

La propiedad background-repeat nos permite controlar cómo se repite (o no) una imagen de fondo dentro de su contenedor. Esta propiedad es fundamental para crear fondos profesionales y evitar patrones no deseados.

La sintaxis básica es:

.element {
  background-image: url('imagen.jpg');
  background-repeat: valor;
}

Valores principales de background-repeat

• repeat: Es el valor predeterminado. La imagen se repite tanto horizontal como verticalmente.

.box-repeat {
  background-image: url('pattern.png');
  background-repeat: repeat;
  height: 200px;
}

• repeat-x: La imagen se repite solo horizontalmente (a lo largo del eje X).

.box-repeat-x {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
  height: 200px;
}

• repeat-y: La imagen se repite solo verticalmente (a lo largo del eje Y).

.box-repeat-y {
  background-image: url('pattern.png');
  background-repeat: repeat-y;
  height: 200px;
}

• no-repeat: La imagen aparece una sola vez, sin repetición.

.box-no-repeat {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  height: 300px;
}

• space: La imagen se repite tanto como sea posible sin recortar, distribuyendo el espacio sobrante entre las imágenes.

.box-space {
  background-image: url('icon.png');
  background-repeat: space;
  height: 200px;
}

• round: La imagen se repite y se escala para evitar espacios entre repeticiones.

.box-round {
  background-image: url('icon.png');
  background-repeat: round;
  height: 200px;
}

Ejemplos prácticos de background-repeat

Patrón de fondo sutil

Los patrones sutiles pueden mejorar el diseño sin distraer del contenido principal:

body {
  background-image: url('subtle-pattern.png');
  background-repeat: repeat;
  color: #333;
  line-height: 1.6;
}

Barra decorativa horizontal

Podemos crear una barra decorativa que se repita solo horizontalmente:

.decorative-bar {
  background-image: url('ornament.png');
  background-repeat: repeat-x;
  height: 20px;
  margin: 20px 0;
}

Icono de indicador único

Para colocar un solo icono como indicador visual:

.notification {
  background-image: url('alert-icon.png');
  background-repeat: no-repeat;
  padding-left: 30px;
}

Fondo con textura espaciada

Para crear un fondo con elementos espaciados uniformemente:

.textured-background {
  background-image: url('star.png');
  background-repeat: space;
  min-height: 300px;
}

Combinando background-image con background-color

Es una buena práctica combinar imágenes de fondo con colores de fondo, especialmente cuando:

1. La imagen puede tardar en cargar
2. La imagen tiene transparencia
3. La imagen no cubre todo el elemento

.banner {
  background-color: #f5f5f5; /* Color de respaldo */
  background-image: url('banner-pattern.png');
  background-repeat: repeat-x;
  padding: 20px;
  color: #333;
}

En este ejemplo, el color gris claro (#f5f5f5) servirá como fondo mientras la imagen se carga, y también se mostrará en las áreas transparentes de la imagen.

Imágenes SVG como fondos

Las imágenes SVG (Scalable Vector Graphics) son ideales para fondos porque:

• Se escalan sin pérdida de calidad
• Suelen tener tamaños de archivo pequeños
• Pueden modificarse con CSS

.modern-background {
  background-image: url('pattern.svg');
  background-repeat: repeat;
  background-size: 100px 100px;
}

Patrones de fondo con CSS puro

También podemos crear patrones simples sin usar imágenes externas, mediante gradientes CSS:

.striped-background {
  background-image: linear-gradient(
    45deg,
    #f2f2f2 25%,
    transparent 25%,
    transparent 75%,
    #f2f2f2 75%
  );
  background-size: 40px 40px;
  background-repeat: repeat;
}

Este código crea un patrón de rayas diagonales utilizando solo CSS, sin necesidad de imágenes externas.

Consideraciones de rendimiento

Al trabajar con imágenes de fondo, es importante considerar:

• Tamaño de archivo: Imágenes grandes pueden ralentizar la carga de la página.
• Optimización: Utiliza formatos como WebP, JPEG optimizado o SVG cuando sea posible.
• Responsive: Considera cómo se verá la imagen en diferentes tamaños de pantalla.

.optimized-background {
  background-image: url('small-pattern.png');
  background-repeat: repeat;
}

@media (min-width: 768px) {
  .optimized-background {
    background-image: url('medium-pattern.png');
  }
}

@media (min-width: 1200px) {
  .optimized-background {
    background-image: url('large-pattern.png');
  }
}

Compatibilidad con navegadores

La propiedad background-repeat tiene excelente soporte en todos los navegadores modernos. Los valores space y round tienen un soporte ligeramente más limitado en navegadores muy antiguos, pero funcionan perfectamente en todos los navegadores actuales.

Consejos prácticos

• Patrones sutiles: Para fondos de página completa, elige patrones sutiles que no compitan con el contenido.
• Contraste: Asegúrate de que haya suficiente contraste entre el fondo y el texto.
• Tamaño de archivo: Optimiza las imágenes para web para mejorar el tiempo de carga.
• Fallbacks: Siempre proporciona un color de fondo como respaldo para cuando la imagen no pueda cargarse.

El control de la repetición de imágenes de fondo es una técnica fundamental en CSS que te permite crear diseños más sofisticados y profesionales, desde patrones sutiles hasta elementos decorativos específicos.

Posicionamiento con background-position y background-size

Cuando trabajamos con imágenes de fondo en CSS, no solo necesitamos controlar si se repiten o no, sino también dónde se posicionan y qué tamaño ocupan dentro del elemento. Las propiedades background-position y background-size nos permiten controlar estos aspectos con precisión.

Posicionamiento con background-position

La propiedad background-position determina la posición inicial de la imagen de fondo dentro del elemento. Por defecto, las imágenes se colocan en la esquina superior izquierda (0% 0%).

La sintaxis básica es:

.element {
  background-image: url('imagen.jpg');
  background-position: valor-x valor-y;
}

Donde:

• valor-x: Define la posición horizontal
• valor-y: Define la posición vertical

Valores para background-position

Podemos usar diferentes tipos de valores:

• Palabras clave para posiciones predefinidas:

.header {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  height: 300px;
}

Las palabras clave disponibles son:

• Horizontal: left, center, right
• Vertical: top, center, bottom

• Valores porcentuales (0% a 100%):

.hero {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: 75% 25%;
  height: 400px;
}

El primer valor (75%) posiciona la imagen al 75% del ancho del elemento desde la izquierda, y el segundo valor (25%) la posiciona al 25% del alto desde arriba.

• Valores en unidades de longitud (px, em, rem):

.icon-box {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: 20px 50px;
  padding: 60px 20px 20px 80px;
}

Este código posiciona la imagen a 20px desde la izquierda y 50px desde la parte superior.

Ejemplos prácticos de background-position

• Imagen centrada horizontalmente, pegada arriba:

.banner {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  height: 200px;
}

• Imagen en la esquina inferior derecha:

.corner-decoration {
  background-image: url('decoration.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 300px;
}

• Posicionamiento con valores negativos (para desplazar la imagen fuera del borde visible):

.offset-image {
  background-image: url('large-image.jpg');
  background-repeat: no-repeat;
  background-position: -50px center;
  height: 400px;
}

Control de tamaño con background-size

La propiedad background-size nos permite controlar las dimensiones de la imagen de fondo. Esta propiedad es esencial para crear fondos responsivos y adaptables a diferentes tamaños de pantalla.

La sintaxis básica es:

.element {
  background-image: url('imagen.jpg');
  background-size: valor;
}

Valores para background-size

• auto: Valor predeterminado. La imagen mantiene su tamaño original.

.default-size {
  background-image: url('pattern.jpg');
  background-size: auto;
  height: 300px;
}

• Valores en longitud (px, em, rem) para ancho y alto:

.fixed-size {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-size: 50px 50px;
  height: 200px;
}

El primer valor (50px) define el ancho, y el segundo (50px) define el alto.

• Valores porcentuales relativos al contenedor:

.percentage-size {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: 100% 50%;
  height: 400px;
}

Este código hace que la imagen ocupe el 100% del ancho y el 50% del alto del elemento.

• cover: Escala la imagen manteniendo su proporción para cubrir completamente el elemento, incluso si parte de la imagen queda recortada.

.cover-background {
  background-image: url('landscape.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 300px;
}

• contain: Escala la imagen manteniendo su proporción para que se ajuste completamente dentro del elemento, sin recortes.

.contain-background {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 200px;
}

Combinando background-position y background-size

La combinación de estas dos propiedades nos permite crear efectos visuales más sofisticados:

Imagen de fondo centrada y escalada

.hero-banner {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 500px;
}

Este código crea un banner con una imagen que:

• Se centra tanto horizontal como verticalmente
• Se escala para cubrir todo el elemento
• No se repite

Icono pequeño en la esquina

.notification-box {
  background-image: url('notification.svg');
  background-repeat: no-repeat;
  background-position: right 10px top 10px; /* 10px desde la derecha, 10px desde arriba */
  background-size: 24px 24px;
  padding: 15px 40px 15px 15px;
  border: 1px solid #ddd;
}

Este ejemplo coloca un pequeño icono de 24x24px en la esquina superior derecha, a 10px de los bordes.

Efecto parallax simple

.parallax-section {
  background-image: url('mountains.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  height: 400px;
}

La adición de background-attachment: fixed crea un efecto parallax donde la imagen de fondo permanece fija mientras el contenido se desplaza.

Casos de uso prácticos

Imágenes de héroe responsivas

.hero {
  background-image: url('hero-mobile.jpg');
  background-position: center;
  background-size: cover;
  height: 300px;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-desktop.jpg');
    height: 500px;
  }
}

Este código utiliza diferentes imágenes y alturas según el tamaño de la pantalla, manteniendo el posicionamiento y escalado consistentes.

Fondos decorativos que no interfieren con el contenido

.content-box {
  background-image: url('decoration.svg');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 150px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Este ejemplo coloca una decoración en la esquina inferior derecha sin interferir con el contenido principal.

Tarjetas con imágenes de fondo

.card {
  background-image: url('card-bg.jpg');
  background-position: center;
  background-size: cover;
  color: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  z-index: -1;
}

Este código crea una tarjeta con imagen de fondo y una superposición oscura para mejorar la legibilidad del texto.

Técnicas avanzadas

Posicionamiento con 4 valores (CSS moderno)

En CSS moderno, podemos usar una sintaxis más avanzada para background-position:

.advanced-position {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: right 20px bottom 15px;
  min-height: 200px;
}

Este código posiciona la imagen a 20px desde el borde derecho y a 15px desde el borde inferior.

Múltiples posiciones para imágenes múltiples

Cuando usamos múltiples imágenes de fondo, podemos especificar posiciones individuales:

.multi-background {
  background-image: 
    url('overlay.png'),
    url('pattern.png');
  background-position: 
    center center,
    left top;
  background-repeat: 
    no-repeat,
    repeat;
  background-size: 
    300px auto,
    auto;
  height: 400px;
}

Cada valor corresponde a la imagen en el mismo orden que se declararon.

Consejos prácticos

• Rendimiento: Las imágenes grandes escaladas con background-size pueden afectar el rendimiento. Utiliza imágenes del tamaño adecuado cuando sea posible.

• Accesibilidad: Recuerda que las imágenes de fondo son decorativas. Si la imagen contiene información importante, considera usar un elemento <img> con atributo alt.

• Fallbacks: Siempre proporciona un color de fondo como respaldo:

.hero {
  background-color: #2a3b4c; /* Color de respaldo */
  background-image: url('hero.jpg');
  background-position: center;
  background-size: cover;
}

• Prueba en diferentes dispositivos: El comportamiento de background-size: cover puede variar según el tamaño y la proporción de la pantalla.

Las propiedades background-position y background-size son herramientas fundamentales para crear diseños web modernos y responsivos. Dominando estas propiedades, podrás controlar con precisión cómo se muestran las imágenes de fondo en tus elementos HTML, adaptándolas a diferentes contextos y necesidades de diseño.

Fondos múltiples y shorthand background

CSS nos permite aplicar múltiples imágenes de fondo a un solo elemento y también simplificar nuestro código mediante la propiedad abreviada background. Estas características nos ayudan a crear diseños más complejos y a mantener nuestro código más limpio y eficiente.

Fondos múltiples

Antes de CSS3, solo podíamos aplicar una imagen de fondo a cada elemento. Ahora podemos superponer varias imágenes, creando efectos visuales más elaborados sin necesidad de elementos HTML adicionales.

Para aplicar múltiples fondos, simplemente separamos cada imagen con comas:

.multi-bg {
  background-image: url('foreground.png'), url('middle.png'), url('background.jpg');
}

En este ejemplo, foreground.png se coloca encima, seguido por middle.png y finalmente background.jpg en la capa inferior. Las imágenes se apilan en el orden en que se declaran, con la primera imagen en la parte superior de la pila.

Controlando cada capa individualmente

Podemos controlar cada propiedad de fondo para cada imagen de manera independiente:

.layered-background {
  background-image: url('icon.png'), url('pattern.svg'), url('gradient.jpg');
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: right top, center, center;
  background-size: 50px, auto, cover;
}

En este código:

• icon.png no se repite, se posiciona en la esquina superior derecha y tiene un tamaño de 50px
• pattern.svg se repite, se centra y mantiene su tamaño original
• gradient.jpg no se repite, se centra y cubre todo el elemento

Ejemplos prácticos de fondos múltiples

• Decoración con patrón y logo:

.decorated-header {
  background-image: 
    url('logo.png'),
    url('pattern.png');
  background-repeat: 
    no-repeat,
    repeat;
  background-position: 
    center left 20px,
    center;
  background-size: 
    80px,
    auto;
  padding: 20px 20px 20px 120px;
}

Este código crea un encabezado con un logo en el lado izquierdo y un patrón repetitivo de fondo.

• Efecto de marco decorativo:

.framed-content {
  background-image: 
    url('corner-tl.png'), url('corner-tr.png'),
    url('corner-bl.png'), url('corner-br.png');
  background-repeat: no-repeat;
  background-position: 
    left top, right top,
    left bottom, right bottom;
  padding: 30px;
}

Este ejemplo coloca imágenes de esquinas decorativas en las cuatro esquinas del elemento.

• Superposición de gradiente sobre imagen:

.hero-section {
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
    url('hero.jpg');
  background-size: 
    cover,
    cover;
  background-position: 
    center,
    center;
  color: white;
  padding: 50px 20px;
}

Este código superpone un gradiente oscuro semitransparente sobre una imagen de fondo, mejorando la legibilidad del texto que se coloque encima.

La propiedad shorthand background

La propiedad abreviada background nos permite definir múltiples propiedades de fondo en una sola declaración, lo que hace que nuestro código sea más conciso y fácil de mantener.

La sintaxis básica es:

.element {
  background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];
}

Ejemplos de uso del shorthand background

• Fondo básico con color e imagen:

.simple-bg {
  background: #f5f5f5 url('pattern.png') repeat;
}

Este código establece un color de fondo gris claro con un patrón que se repite.

• Fondo completo con todas las propiedades:

.complete-bg {
  background: #3498db url('icon.svg') no-repeat center / 50px fixed;
}

Este ejemplo define:

• Color de fondo: #3498db (azul)

• Imagen de fondo: icon.svg

• Repetición: no-repeat

• Posición: center

• Tamaño: 50px

• Attachment: fixed (la imagen permanece fija durante el desplazamiento)

• Usando solo algunas propiedades:

.partial-bg {
  background: url('banner.jpg') top center / cover;
}

Aquí definimos la imagen, posición y tamaño, omitiendo las demás propiedades que tomarán sus valores por defecto.

Shorthand para múltiples fondos

También podemos usar la notación abreviada con múltiples fondos, separándolos con comas:

.multi-shorthand {
  background: 
    url('overlay.png') no-repeat center / 200px,
    #333 url('pattern.svg') repeat;
}

Este código aplica dos capas de fondo:

1. Una imagen overlay.png centrada sin repetición y con un tamaño de 200px
2. Un color de fondo gris oscuro (#333) con un patrón SVG que se repite

Ejemplo práctico: Tarjeta con múltiples fondos usando shorthand

.card {
  background: 
    url('badge.png') no-repeat right 10px top 10px / 30px,
    linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.7)),
    url('texture.jpg') center / cover;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Este ejemplo crea una tarjeta con:

1. Una insignia en la esquina superior derecha
2. Un gradiente blanco semitransparente para mejorar la legibilidad
3. Una textura de fondo que cubre todo el elemento

Orden y consideraciones importantes

Orden en el shorthand

El orden de las propiedades en la notación abreviada no es estrictamente obligatorio, pero se recomienda seguir este patrón para mayor claridad:

background: [color] [image] [repeat] [attachment] [position] / [size];

Nótese que background-size va después de background-position, separado por una barra diagonal (/).

Consideraciones al usar el shorthand

• Restablecimiento de valores: La propiedad abreviada background restablece todas las propiedades individuales de fondo a sus valores predeterminados si no se especifican. Por ejemplo:

.element {
  background-size: 100px;
  background: url('image.jpg'); /* Esto borra el background-size anterior */
}

• Compatibilidad con navegadores: La sintaxis para background-size en el shorthand (usando /) no es compatible con navegadores muy antiguos. Para máxima compatibilidad, considera usar la propiedad individual:

.compatible {
  background: url('image.jpg') no-repeat center;
  background-size: cover; /* Propiedad separada para mayor compatibilidad */
}

Casos de uso avanzados

Combinando fondos múltiples con pseudo-elementos

Podemos extender aún más nuestras posibilidades combinando fondos múltiples con pseudo-elementos:

.advanced-bg {
  background: url('main-pattern.svg') repeat;
  position: relative;
  z-index: 1;
}

.advanced-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    url('overlay-top.png') no-repeat top / 100%,
    url('overlay-bottom.png') no-repeat bottom / 100%;
  z-index: -1;
}

Este código crea un elemento con un patrón principal y usa un pseudo-elemento para añadir superposiciones en la parte superior e inferior.

Fondos responsivos con media queries

Podemos adaptar nuestros fondos a diferentes tamaños de pantalla:

.responsive-bg {
  /* Fondo para móviles: más simple */
  background: #f5f5f5 url('simple-bg.jpg') center / cover;
}

@media (min-width: 768px) {
  .responsive-bg {
    /* Fondo para tablets y escritorio: más elaborado */
    background: 
      url('decoration-left.png') no-repeat left center / auto 80%,
      url('decoration-right.png') no-repeat right center / auto 80%,
      #f5f5f5 url('detailed-bg.jpg') center / cover;
  }
}

Este ejemplo muestra un fondo simple en dispositivos móviles y un fondo más elaborado con decoraciones laterales en pantallas más grandes.

Consejos prácticos

• Optimización de rendimiento: Cada imagen adicional aumenta el tiempo de carga. Considera combinar imágenes decorativas en sprites o usar SVG cuando sea posible.

• Orden de capas: Planifica cuidadosamente el orden de tus imágenes de fondo, recordando que la primera imagen declarada estará en la parte superior.

• Fallbacks: Proporciona siempre un color de fondo sólido como primera capa para garantizar la legibilidad si las imágenes no se cargan:

.reliable-bg {
  background: 
    #3a3a3a /* Color de respaldo */
    url('main-image.jpg') center / cover;
}

• Mantenibilidad: Para estilos complejos con muchas capas, considera usar propiedades individuales en lugar del shorthand para mejorar la legibilidad del código:

.complex-bg {
  /* Más fácil de leer y mantener que una línea larga de shorthand */
  background-color: #f0f0f0;
  background-image: 
    url('layer1.png'),
    url('layer2.png'),
    url('layer3.png');
  background-repeat: 
    no-repeat,
    repeat-x,
    repeat;
  background-position: 
    center top,
    left center,
    center;
  background-size: 
    300px auto,
    auto 100%,
    cover;
}

Los fondos múltiples y la propiedad shorthand background son herramientas poderosas que te permiten crear diseños más sofisticados con menos código HTML. Dominar estas técnicas te ayudará a crear interfaces más ricas visualmente mientras mantienes tu código limpio y eficiente.