1. Introducción

El background es una de las propiedades más versátiles de CSS. Permite definir colores, imágenes, gradientes, patrones y hasta videos como fondo de cualquier elemento HTML. Un buen manejo de los fondos mejora la estética, la usabilidad y el rendimiento de una web.

2. Propiedades esenciales

• background-color: color sólido.
• background-image: una o más imágenes o gradientes.
• background-size: controla el escalado (cover, contain o valores específicos).
• background-position: ubicación del fondo.
• background-repeat: repetición (repeat-x, repeat-y, no-repeat).
• background-attachment: scroll o fixed (parallax).
• background-blend-mode: mezcla de capas.

3. Tipos de fondos y ejemplos

.bg-color {
  background-color: #2c3e50; /* azul oscuro */
}

.bg-image {
  background-image: url('https://example.com/hero.jpg');
  background-size: cover;           /* ocupa todo el contenedor */
  background-position: center;      /* centra la imagen */
  background-repeat: no-repeat;
}

.bg-gradient {
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

.bg-radial {
  background: radial-gradient(circle at 30% 30%, #4facfe, #00f2fe);
}

.bg-multiple {
  background-image: 
    url('https://example.com/pattern.png'),
    linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-size: 100px 100px, cover;
  background-repeat: repeat, no-repeat;
  background-position: left top, center;
}

<div class="bg-video">
  <video autoplay muted loop playsinline>
    <source src="/assets/video.mp4" type="video/mp4">
    Tu navegador no soporta video.
  </video>
</div>
<style>
.bg-video {
  position: relative; overflow: hidden; height: 400px;
}
.bg-video video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
</style>

4. Comparativa rápida de tipos de fondos

5. Buenas prácticas y optimización

• Minimiza peticiones: usa gradientes o sprites cuando sea posible.
• Compresión de imágenes: WebP o AVIF para reducir peso sin perder calidad.
• Responsive: combina background-size: cover y media queries para servir versiones adaptadas.
• Accesibilidad: siempre provee un background-color de respaldo y respeta prefers-reduced-motion para videos.
• Seguridad: evita URLs externas sin HTTPS; usa CSP img-src y media-src para prevenir inyección.
• Variables CSS: centraliza colores y rutas de imágenes para facilitar mantenimiento.

  :root {
    --primary-bg: #2c3e50;
    --hero-img: url('/imgs/hero.jpg');
  }
  .hero { background: var(--primary-bg) var(--hero-img) center/cover no-repeat; }

6. Depuración (troubleshooting)

Si el fondo no se muestra:

1. Verifica la ruta y que la imagen sea accesible (status 200).
2. Comprueba que no haya background: none sobrescribiendo la regla.
3. Revisa la cascada y la especificidad; usa el inspector del navegador.
4. Para gradientes, asegúrate de que el prefijo -webkit- es necesario solo en navegadores muy antiguos.

7. Compatibilidad y soporte

Los navegadores modernos (Chrome, Edge, Firefox, Safari) soportan todas las propiedades descritas. Para background-blend-mode y radial-gradient, se requiere al menos IE10+. Consulte caniuse.com para detalles actualizados.