background-color — Frontend Classroom

background-color establece el color de fondo de la caja de un elemento. Su área de cobertura incluye el contenido y el padding — todo lo que está “dentro” del borde — pero no el borde en sí ni el margin. Esto tiene un efecto visual directo: un <div> con background-color: teal y padding: 24px muestra ese color de fondo en los 24px de espacio interior, no solo detrás del texto. El fondo “llena” toda la superficie interior del elemento.

El valor inicial de background-color en cualquier elemento es transparent, lo que significa que el fondo es invisible por defecto y el color que percibimos viene del elemento padre (o del <body>). Esto es distinto de color que sí se hereda en la cascada: background-color no se hereda, cada elemento arranca desde transparent a menos que lo sobreescriba explícitamente.

Cuando un elemento tiene tanto background-color como background-image, el color de fondo actúa como capa inferior: la imagen (o gradiente) se pinta encima. Esto es especialmente útil como fallback — si la imagen no carga, el color sólido queda visible — y para gradientes con transparencia, donde el color debajo complementa los tonos del degradado.

Cómo funciona

El motor de pintado del navegador dibuja los fondos de atrás hacia adelante, por debajo del contenido. background-color es siempre la capa más profunda: primero el color, luego la imagen (si la hay), luego el contenido. Cuando no se especifica ninguna imagen, el color de fondo cubre toda la superficie interior del elemento directamente.

La propiedad afecta exactamente el mismo área que el padding: box-sizing no cambia qué se pinta, sino cómo se calcula el tamaño del elemento. Con border-box o content-box, el fondo siempre llega hasta el borde exterior del padding.

Sintaxis

.elemento {
  background-color: #f1f5f9;          /* hex */
  background-color: teal;             /* keyword */
  background-color: rgb(37, 99, 235); /* función rgb */
  background-color: hsl(210, 70%, 40%); /* función hsl */
  background-color: transparent;      /* sin fondo (valor inicial) */
}

#f1f5f9 — gris claro

teal

rgb(37,99,235)

Valores

Keywords — nombres de color

Los 148 nombres de color de CSS son válidos: red, teal, navy, coral, etc. transparent es la keyword especial que equivale a rgba(0,0,0,0) — el valor inicial de todo elemento.

.aviso   { background-color: red; }
.tarjeta { background-color: white; }
.reset   { background-color: transparent; }

Hex `#RRGGBB` y `#RGB` (el más común en producción)

.base      { background-color: #f8fafc; }  /* casi blanco */
.acento    { background-color: #0d9488; }  /* teal */
.oscuro    { background-color: #0f172a; }  /* casi negro */
.atajo     { background-color: #f0f; }     /* #ff00ff magenta */

`rgb()` / `rgba()`

.solido     { background-color: rgb(37, 99, 235); }
.semitrans  { background-color: rgba(220, 38, 38, 0.15); } /* rojo tenue */

rgba() es el modo habitual para fondos semitransparentes: overlays, badges de alerta, capas de hover.

`hsl()` / `hsla()`

Útil para generar variaciones de un mismo tono:

.base   { background-color: hsl(210, 70%, 95%); } /* muy claro */
.medio  { background-color: hsl(210, 70%, 55%); }
.oscuro { background-color: hsl(210, 70%, 25%); }

`transparent` (valor inicial)

Sin fondo visible. El elemento “deja ver” el fondo del padre. Útil para resetear fondos heredados de otros estilos o en transiciones CSS (transition: background-color 0.2s).

Ejemplo realista

/* Sistema de notificaciones con fondos semitransparentes */
.alerta-info    { background-color: rgba(37, 99, 235, 0.1); }
.alerta-exito   { background-color: rgba(21, 128, 61, 0.1); }
.alerta-error   { background-color: rgba(220, 38, 38, 0.1); }

/* Botones */
.btn-primario   { background-color: #0d9488; }
.btn-secundario { background-color: transparent; }

/* Hero con color como fallback antes del gradiente */
.hero {
  background-color: #1e3a5f;
  background-image: linear-gradient(180deg, #1e3a5f, #3a7bd5);
}

Info: el proceso se completó correctamente.

Error: no se pudo guardar el archivo.

Cuándo usarlo

Situación	Valor recomendado
Fondo sólido de tarjeta o panel	hex o keyword
Badge o etiqueta de estado	`rgba()` con baja opacidad
Hero con gradiente (fallback)	color + `background-image` encima
Resetear fondo de un elemento	`transparent`
Variaciones de una paleta	`hsl()` ajustando luminosidad

Notas, gotchas e interacción

background-color no se hereda. Cada elemento arranca en transparent. Si querés que los hijos tengan el mismo fondo, tenés que declararlo en cada uno (o dejar que se vea el fondo del padre a través de ellos).
El fondo cubre el padding pero no el margin. El espacio exterior del elemento (margin) es siempre transparente — ahí se ve el fondo del contenedor. Si querés colorear el área entre elementos, necesitás padding no margin.
background-color como fallback para imágenes. Cuando se combina con background-image, el color queda debajo. Si la imagen tarda en cargar o falla, el color es lo que ve el usuario. Es una buena práctica poner un color afín al tono de la imagen.
Interacción con border-radius. Cuando se redondean las esquinas con border-radius, el fondo también se recorta para seguir la forma redondeada. El color no se “desborda” fuera del radio.
Semitransparencias con rgba() vs opacity. rgba() en background-color hace semitransparente solo el fondo. opacity en el elemento hace semitransparente todo (fondo + texto + bordes + hijos). Para overlays, siempre preferir rgba() en el fondo.

Vigente / legacy

No hay forma legacy. background-color existe desde CSS1 y está universalmente soportado. La sintaxis moderna de hsl() sin comas (hsl(210 70% 55%)) es válida en navegadores actuales pero la versión con comas es más compatible con bases de código legadas.