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 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:
- Abre DevTools (F12) y selecciona el elemento problemático
- En la pestaña Styles, busca propiedades tachadas — están siendo sobreescritas
- Filtra por :hov para ver estilos de estados (:hover, :focus)
- Activa/desactiva el modo oscuro desde DevTools: panel Rendering → Emulate CSS media feature prefers-color-scheme
- 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.