CSS parece sencillo hasta que algo no funciona como esperas. Llevas horas mirando el inspector del navegador, cambias una propiedad, otra, y el problema sigue. Este artículo recoge los errores más frecuentes que me he encontrado montando este blog, con soluciones directas.

El fondo que desaparece al hacer scroll

El problema: La página se ve bien en la parte visible, pero al bajar aparece un fondo blanco o distinto al esperado.

Por qué ocurre: El color de fondo está definido en un contenedor interior (como main o article), no en html o body. Cuando el contenido es más corto que la ventana, el resto de la página queda sin color.

La solución:

/* MAL: solo el body tiene color */
body {
  background-color: #0f172a;
}

/* BIEN: también html, para cubrir toda la página */
html,
body {
  background-color: #0f172a;
  min-height: 100%;
}

Esto garantiza que el fondo cubre desde el primer píxel hasta el último, sin importar cuánto contenido haya.

Dark mode que solo aplica a medias

El problema: Activas el modo oscuro y algunos elementos cambian, pero otros quedan con fondo claro.

Por qué ocurre: El dark mode en frameworks como Tailwind o Blowfish funciona añadiendo la clase .dark al elemento html. Si tu CSS personalizado solo apunta a body, puede perder el color en ciertos casos.

/* Puede fallar en algunos navegadores */
html.dark body {
  background-color: #0f172a;
}

/* Más robusto: apuntar también a html */
html.dark,
html.dark body {
  background-color: #0f172a;
}

Regla práctica: cuando trabajes con dark mode basado en clases, aplica siempre el color de fondo tanto en html como en body.

background-image sin background-color

El problema: Tienes un patrón SVG o imagen de fondo, pero en zonas donde la imagen no carga o tarda, aparece un fondo blanco.

La solución: Define siempre un background-color de fallback junto con background-image:

body {
  background-color: #0f172a;           /* fallback si la imagen no carga */
  background-image: url("/patron.svg");
  background-size: 120px 120px;
  background-repeat: repeat;
}

El color actúa de red de seguridad. El usuario nunca ve un destello blanco mientras carga el SVG.

background-attachment: fixed y el problema en móvil

El problema: El efecto parallax con background-attachment: fixed se ve bien en escritorio pero en móvil el fondo aparece estático, cortado o desplazado de forma extraña.

Por qué ocurre: La mayoría de navegadores móviles ignoran fixed en elementos que no son html/body, y algunos lo implementan con bugs conocidos en iOS Safari.

La solución: Desactívalo en móvil:

body {
  background-attachment: fixed;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll; /* o simplemente eliminar el patrón */
    background-image: none;
  }
}

z-index y el contenido que desaparece detrás del fondo

El problema: Añades un fondo decorativo y de repente el texto o los elementos interactivos desaparecen o quedan inaccesibles.

Por qué ocurre: El fondo tiene un z-index mayor que el contenido, o el contenido no tiene position definido (necesario para que z-index funcione).

/* El fondo queda detrás */
.fondo-decorativo {
  position: fixed;
  z-index: 0;
}

/* El contenido queda encima */
main,
article,
.contenido {
  position: relative;
  z-index: 1;
}

Especificidad: cuando tu CSS no sobreescribe al del framework

El problema: Escribes una regla CSS pero no tiene efecto. El inspector muestra que está siendo sobreescrita por el framework (Tailwind, Bootstrap, etc.).

Por qué ocurre: La especificidad CSS determina qué regla gana. Un selector de clase (.dark body) tiene menos peso que un selector compuesto del framework.

Soluciones por orden de preferencia:

/* 1. Aumentar especificidad añadiendo el padre */
html.dark body { ... }

/* 2. Usar :is() para agrupar sin perder especificidad */
:is(html.dark) body { ... }

/* 3. !important — solo como último recurso */
body { background-color: #0f172a !important; }

Evita !important siempre que puedas — crea una deuda de especificidad que se acumula y hace el CSS imposible de mantener.

Variables CSS: el orden importa

El problema: Defines variables CSS (custom properties) pero en algunos contextos no funcionan.

Por qué ocurre: Las variables CSS (custom properties) solo son accesibles en el elemento donde se definen y sus descendientes. Si las defines en body, no estarán disponibles en html.

/* BIEN: definir en :root para disponibilidad global */
:root {
  --color-fondo: #0f172a;
  --color-texto: #f1f5f9;
}

/* Luego úsalas en cualquier elemento */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

Depuración rápida con el inspector

Cuando algo no funciona:

1. Abre DevTools (F12) y selecciona el elemento problemático
2. En la pestaña Styles, busca propiedades tachadas — están siendo sobreescritas
3. Filtra por :hov para ver estilos de estados (:hover, :focus)
4. Activa/desactiva el modo oscuro desde DevTools: panel Rendering → Emulate CSS media feature prefers-color-scheme
5. Usa la pestaña Computed para ver el valor final que aplica realmente

La mayoría de estos errores tienen la misma raíz: asumir que el estilo se propaga hacia arriba en el DOM cuando en realidad solo baja. html y body son el punto de partida — asegúrate de que tienen exactamente el aspecto que quieres antes de preocuparte por el resto.

Equipamiento recomendado

• Raspberry Pi 3 B+ — Servidor ligero de bajo consumo para empezar tu homelab
• Raspberry Pi 4 (4GB) — La base perfecta para homelab, Docker y monitorización

Enlaces de afiliado. Sin coste extra para ti.