Efecto parallax con Tailwind 4: guía completa para imágenes y vídeos

El efecto parallax es uno de esos recursos visuales que, bien usados, hacen que una página pase de una página más a una experiencia memorable. Y la buena noticia: con Tailwind 4 puedes implementarlo de forma muy sencilla, tanto con imágenes estáticas como con vídeos de YouTube como fondo.

En este artículo veremos:

Qué es exactamente el efecto parallax y cuándo tiene sentido usarlo.
Cómo implementarlo solo con Tailwind (sin JavaScript) usando bg-fixed.
Cómo montar un parallax con vídeo de YouTube usando un poco de CSS y JavaScript.
Un ejemplo completo listo para copiar, probar y adaptar.
Buenas prácticas de rendimiento, accesibilidad y comportamiento en móviles.
Una tabla comparativa rápida para elegir el enfoque adecuado.

La guía está pensada para usarse tanto en proyectos «puros» de Tailwind como en entornos WordPress (Bricks, Gutenberg, etc.). Las clases funcionan igual en todos los casos; cambia solo cómo integras Tailwind en tu proyecto.

Qué es el efecto parallax y por qué usarlo

El efecto parallax consiste en que el fondo de una sección se mueve a una velocidad diferente a la del contenido cuando haces scroll. En la práctica, suele traducirse en:

Un fondo que parece quedarse «fijo» en pantalla.
Contenido (texto, botones, tarjetas…) que se desplaza por encima.

Esto crea una ilusión de profundidad y da a la página una sensación más cinematográfica y dinámica.

Beneficios del parallax (cuando se usa con cabeza)

Mayor impacto visual: convierte secciones clave (heroes, llamadas a la acción, bloques de storytelling) en momentos memorables.
Focaliza la atención: dirige la mirada del usuario hacia mensajes o acciones concretas.
Experiencia de usuario más rica: transmite cuidado por el detalle y modernidad.
Sensación de proyecto «premium»: bien usado, comunica calidad de diseño.

Eso sí: no abuses. No hace falta que toda la web tenga parallax. Úsalo como un acento visual en secciones muy concretas.

Dos formas de crear parallax con Tailwind 4

En esta guía trabajaremos con dos enfoques complementarios:

Parallax con imágenes
- Solo Tailwind, sin JavaScript.
- Súper sencillo, ideal para fondos fotográficos.
Parallax con vídeos de YouTube
- Requiere CSS + JavaScript, pero el resultado es espectacular.
- Perfecto para webs creativas, productos, branding, etc.

Ambos métodos pueden coexistir sin problemas en la misma página.

Método 1: Parallax con imágenes (sin JavaScript)

Este es el enfoque más simple y el que deberías usar por defecto. Tailwind ya incluye la clase bg-fixed, que se apoya en la propiedad background-attachment: fixed.

Estructura básica de una sección parallax

<section class="relative min-h-screen bg-cover bg-center bg-fixed" style="background-image: url('https://tu-imagen.jpg');">
  <!-- Overlay opcional para mejorar el contraste -->
  <div class="absolute inset-0 bg-black/50"></div>

  <!-- Contenido -->
  <div class="relative z-10 min-h-screen flex items-center justify-center px-4">
    <div class="text-center text-white max-w-4xl">
      <h2 class="text-5xl font-bold mb-6">
        Tu Título Aquí
      </h2>
      <p class="text-xl mb-8">
        Tu contenido aquí
      </p>
      <button class="bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
        Call to Action
      </button>
    </div>
  </div>
</section>

Qué hace cada clase de Tailwind

bg-fixed → la «clase mágica»: aplica background-attachment: fixed y genera el efecto parallax.
bg-cover → hace que la imagen cubra toda la sección sin deformarse.
bg-center → centra la imagen dentro del área visible.
min-h-screen → la sección ocupa como mínimo el alto de la ventana.
relative → crea un contexto de posicionamiento para el overlay y el contenido.
En el contenido:
- absolute inset-0 → el overlay cubre toda la sección.
- z-10 → el contenido se dibuja por encima del overlay.
- flex items-center justify-center → centrado vertical y horizontal.

El overlay oscuro

El overlay nos ayuda a garantizar contraste entre el fondo y el texto:

<div class="absolute inset-0 bg-black/50"></div>

absolute inset-0 → ocupa todo el contenedor padre.
bg-black/50 → negro al 50% de opacidad.

Otras variaciones de overlay

Puedes adaptar el overlay al estilo visual de tu proyecto:

<!-- Overlay sólido más marcado -->
<div class="absolute inset-0 bg-black/60"></div>

<!-- Overlay con gradiente vertical -->
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>

<!-- Overlay con color de marca -->
<div class="absolute inset-0 bg-blue-900/40"></div>

<!-- Sin overlay -->
<!-- Simplemente no incluyas este div -->

Ejemplo con varias secciones parallax + contenido normal

<!-- Sección 1: Imagen de montañas -->
<section class="relative min-h-screen bg-cover bg-center bg-fixed" style="background-image: url('montanas.jpg');">
  <div class="absolute inset-0 bg-black/50"></div>
  <div class="relative z-10 min-h-screen flex items-center justify-center px-4">
    <div class="text-center text-white max-w-4xl">
      <h2 class="text-5xl font-bold mb-6">Explora la Naturaleza</h2>
      <p class="text-xl">Descubre paisajes increíbles</p>
    </div>
  </div>
</section>

<!-- Contenido intermedio sin parallax -->
<section class="py-20 bg-white">
  <div class="max-w-4xl mx-auto px-4">
    <h2 class="text-4xl font-bold mb-6">Contenido normal</h2>
    <p>Aquí va tu contenido regular entre secciones parallax.</p>
  </div>
</section>

<!-- Sección 2: Imagen de océano -->
<section class="relative min-h-screen bg-cover bg-center bg-fixed" style="background-image: url('oceano.jpg');">
  <div class="absolute inset-0 bg-blue-900/40"></div>
  <div class="relative z-10 min-h-screen flex items-end pb-20 px-4">
    <div class="text-center text-white max-w-4xl mx-auto">
      <h2 class="text-5xl font-bold mb-6">Sumérgete en el Azul</h2>
    </div>
  </div>
</section>

¿Por qué funciona `bg-fixed`?

La clave está en background-attachment: fixed;, que hace que el fondo se posicione respecto al viewport, no al elemento.

El contenido hace scroll.
El fondo permanece «pegado» a la ventana.
El resultado es el efecto parallax, sin una sola línea de JavaScript.

Ventajas de este método:

Sin JavaScript.
Una sola utilidad de Tailwind.
Rendimiento excelente.
Compatible con navegadores modernos.
Fácil de mantener.

Método 2: Parallax con vídeos de YouTube

Usar un vídeo como fondo puede aportar muchísimo dinamismo: demostraciones de producto, escenas de marca, animaciones, etc.

Aquí no podemos usar bg-fixed, porque no estamos tratando con un background-image, sino con un elemento real (<iframe>).

La solución consiste en:

Colocar el vídeo en un contenedor position: fixed.
Controlar su visibilidad con JavaScript en función de la sección visible.
Aplicar un overlay para mejorar el contraste.

¿Por qué necesitamos JavaScript?

position: fixed siempre se posiciona respecto a la ventana. Si pones un vídeo con fixed, se verá en toda la página.

Para que el vídeo solo se vea cuando el usuario está sobre una sección concreta:

Detectamos qué sección está visible.
Activamos el vídeo asociado (añadiendo una clase .active).
Desactivamos el resto (quitando .active).

Estructura HTML básica

<!-- Contenedor del vídeo (fixed, se coloca “arriba” en el HTML) -->
<div id="video-1" class="parallax-video-container">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1"
    frameborder="0"
    allow="autoplay; encrypted-media"
  ></iframe>

  <!-- Overlay del vídeo -->
  <div class="absolute inset-0 bg-black/40 pointer-events-none"></div>
</div>

<!-- Sección que activa este vídeo -->
<section class="relative min-h-screen" data-video-id="video-1">
  <div class="relative z-10 min-h-screen flex items-center justify-center px-4">
    <div class="text-center text-white max-w-4xl">
      <h2 class="text-5xl font-bold mb-6">Parallax con vídeo</h2>
      <p class="text-xl">El vídeo permanece fijo mientras haces scroll.</p>
    </div>
  </div>
</section>

Fíjate en dos cosas importantes:

El contenedor del vídeo tiene un ID (video-1).
La sección usa un atributo data-video-id="video-1" para indicar qué vídeo debe mostrarse.

Parámetros importantes del embed de YouTube

En la URL del iframe:

autoplay=1 → reproduce automáticamente.
mute=1 → sin sonido (obligatorio para autoplay en la mayoría de navegadores).
loop=1 → el vídeo se repite en bucle.
playlist=VIDEO_ID → necesario para que el loop funcione correctamente.
controls=0 → oculta los controles.
showinfo=0 → oculta información del vídeo.
rel=0 → no muestra vídeos relacionados de otros canales.
modestbranding=1 → minimiza el branding de YouTube.
playsinline=1 → reproduce en línea en móviles (no a pantalla completa por defecto).

CSS necesario para el contenedor de vídeo

Este CSS no podemos generarlo solo con utilities; lo definimos como clases personalizadas:

/* Contenedor del vídeo en position fixed */
.parallax-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Cuando está activo, se muestra */
.parallax-video-container.active {
  opacity: 1;
}

/* El iframe cubre todo el contenedor */
.parallax-video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* Proporción 16:9 */
  min-height: 100vh;
  min-width: 177.77vh; /* Inverso de 16:9 */
  transform: translate(-50%, -50%);
}

¿Por qué esos valores «raros»?

56.25vw = (9 / 16) × 100 → altura proporcional para un vídeo 16:9 usando el ancho de la ventana.
177.77vh ≈ (16 / 9) × 100 → ancho mínimo cuando la pantalla es más vertical que horizontal.

Con esta combinación, el vídeo siempre cubre toda la pantalla, sin barras negras, en prácticamente cualquier proporción de pantalla.

JavaScript para controlar qué vídeo se ve

function initVideoParallax() {
  // Todas las secciones que declaran un data-video-id
  const videoSections = document.querySelectorAll("[data-video-id]");

  function updateVideoVisibility() {
    const windowHeight = window.innerHeight;

    videoSections.forEach((section) => {
      const videoId = section.dataset.videoId;
      const videoContainer = document.getElementById(videoId);
      if (!videoContainer) return;

      const rect = section.getBoundingClientRect();

      // Consideramos visible la sección si:
      // - su top está por encima del bottom de la ventana
      // - su bottom está por debajo del top de la ventana
      const isVisible = rect.top < windowHeight && rect.bottom > 0;

      if (isVisible) {
        videoContainer.classList.add("active");
      } else {
        videoContainer.classList.remove("active");
      }
    });
  }

  // Optimización: usamos requestAnimationFrame para no recalcular en cada píxel de scroll
  let ticking = false;

  function onScroll() {
    if (!ticking) {
      requestAnimationFrame(() => {
        updateVideoVisibility();
        ticking = false;
      });
      ticking = true;
    }
  }

  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", updateVideoVisibility);

  // Ejecutar al cargar
  updateVideoVisibility();
}

// Iniciar cuando el DOM esté listo
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initVideoParallax);
} else {
  initVideoParallax();
}

Con esto:

Cada vez que el usuario hace scroll o cambia el tamaño de la ventana, comprobamos qué secciones están visibles.
Solo el vídeo asociado a las secciones visibles obtiene la clase .active (y por tanto opacity: 1).

Varios vídeos en la misma página

Solo tienes que repetir el patrón asignando IDs únicos:

<!-- Vídeo 1 -->
<div id="video-1" class="parallax-video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID_1?..."></iframe>
  <div class="absolute inset-0 bg-black/40 pointer-events-none"></div>
</div>

<!-- Vídeo 2 -->
<div id="video-2" class="parallax-video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID_2?..."></iframe>
  <div class="absolute inset-0 bg-blue-900/50 pointer-events-none"></div>
</div>

<!-- Vídeo 3 -->
<div id="video-3" class="parallax-video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID_3?..."></iframe>
  <div class="absolute inset-0 bg-purple-900/40 pointer-events-none"></div>
</div>

<!-- Sección 1 -->
<section data-video-id="video-1" class="relative min-h-screen">
  <!-- Contenido -->
</section>

<!-- Sección 2 -->
<section data-video-id="video-2" class="relative min-h-screen">
  <!-- Contenido -->
</section>

<!-- Sección 3 -->
<section data-video-id="video-3" class="relative min-h-screen">
  <!-- Contenido -->
</section>

El JavaScript es el mismo; no tienes que tocar nada.

Ejemplo completo: combinando imágenes y vídeo

Este es un ejemplo mínimo pero completo, perfecto para probar el efecto en local o en un entorno de pruebas (antes de integrarlo en tu tema de WordPress, Bricks, etc.):

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parallax Completo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .parallax-video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
      }

      .parallax-video-container.active {
        opacity: 1;
      }

      .parallax-video-container iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw;
        min-height: 100vh;
        min-width: 177.77vh;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body class="bg-gray-900">
    <!-- Hero Section -->
    <section
      class="relative h-screen bg-gradient-to-b from-gray-800 to-gray-900 flex items-center justify-center"
    >
      <div class="text-center text-white px-4">
        <h1 class="text-6xl font-bold mb-4">Bienvenido</h1>
        <p class="text-xl">Descubre el efecto parallax</p>
      </div>
    </section>

    <!-- SECCIÓN 1: Imagen con bg-fixed -->
    <section
      class="relative min-h-screen bg-cover bg-center bg-fixed"
      style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920');"
    >
      <div class="absolute inset-0 bg-black/50"></div>

      <div
        class="relative z-10 min-h-screen flex items-center justify-center px-4"
      >
        <div class="text-center text-white max-w-4xl">
          <h2 class="text-5xl font-bold mb-6">Parallax con imagen</h2>
          <p class="text-xl mb-8">
            Solo con la clase <code>bg-fixed</code> de Tailwind.
          </p>
          <button
            class="bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition"
          >
            Explorar
          </button>
        </div>
      </div>
    </section>

    <!-- Sección intermedia (sin parallax) -->
    <section class="py-20 bg-gray-900">
      <div class="max-w-4xl mx-auto px-4 text-center text-white">
        <h2 class="text-4xl font-bold mb-6">Contenido intermedio</h2>
        <p class="text-xl text-gray-400">
          Entre secciones parallax puedes tener contenido normal.
        </p>
      </div>
    </section>

    <!-- VIDEO 1: Contenedor fixed -->
    <div id="video-1" class="parallax-video-container">
      <iframe
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&loop=1&playlist=dQw4w9WgXcQ&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1"
        frameborder="0"
        allow="autoplay; encrypted-media"
      ></iframe>
      <div class="absolute inset-0 bg-black/40 pointer-events-none"></div>
    </div>

    <!-- SECCIÓN 2: Vídeo de YouTube -->
    <section class="relative min-h-screen" data-video-id="video-1">
      <div
        class="relative z-10 min-h-screen flex items-center justify-center px-4"
      >
        <div class="text-center text-white max-w-4xl">
          <h2 class="text-5xl font-bold mb-6">Parallax con vídeo</h2>
          <p class="text-xl mb-8">Vídeo de YouTube como fondo.</p>
          <button
            class="bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition"
          >
            Ver más
          </button>
        </div>
      </div>
    </section>

    <!-- SECCIÓN 3: Otra imagen -->
    <section
      class="relative min-h-screen bg-cover bg-center bg-fixed"
      style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920');"
    >
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/30 to-transparent"
      ></div>

      <div class="relative z-10 min-h-screen flex items-end pb-20 px-4">
        <div class="text-center text-white max-w-4xl mx-auto">
          <h2 class="text-6xl font-bold mb-6">Infinitas posibilidades</h2>
          <p class="text-xl">
            Combina imágenes y vídeos según lo que necesite tu proyecto.
          </p>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <section
      class="relative h-screen bg-gradient-to-b from-gray-900 to-gray-800 flex items-center justify-center"
    >
      <div class="text-center text-white px-4">
        <h2 class="text-4xl font-bold mb-4">¡Eso es todo!</h2>
        <p class="text-xl text-gray-300">
          Ahora ya sabes crear parallax con Tailwind 4.
        </p>
      </div>
    </section>

    <!-- JavaScript -->
    <script>
      function initVideoParallax() {
        const videoSections = document.querySelectorAll("[data-video-id]");

        function updateVideoVisibility() {
          const windowHeight = window.innerHeight;

          videoSections.forEach((section) => {
            const videoId = section.dataset.videoId;
            const videoContainer = document.getElementById(videoId);
            if (!videoContainer) return;

            const rect = section.getBoundingClientRect();
            const isVisible = rect.top < windowHeight && rect.bottom > 0;

            if (isVisible) {
              videoContainer.classList.add("active");
            } else {
              videoContainer.classList.remove("active");
            }
          });
        }

        let ticking = false;
        function onScroll() {
          if (!ticking) {
            requestAnimationFrame(() => {
              updateVideoVisibility();
              ticking = false;
            });
            ticking = true;
          }
        }

        window.addEventListener("scroll", onScroll, { passive: true });
        window.addEventListener("resize", updateVideoVisibility);
        updateVideoVisibility();
      }

      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initVideoParallax);
      } else {
        initVideoParallax();
      }
    </script>
  </body>
</html>

En entornos WordPress/Bricks, la idea es la misma: este HTML se traduce en secciones y contenedores que puedes montar con el maquetador, usando classes Tailwind y un pequeño archivo CSS/JS común.

Consejos y mejores prácticas

Optimización de imágenes

Para mantener el rendimiento bajo control:

Usa formatos modernos (WebP) cuando sea posible.
Comprime las imágenes (TinyPNG, Squoosh, etc.).
No subas imágenes gigantes si tu diseño va a 1920 px de ancho.
Aplica lazy loading para secciones no visibles de inicio.

Ejemplo sencillo de background con WebP + fallback:

<sectionvclass="relative min-h-screen bg-cover bg-center bg-fixed" style="background-image: url('imagen.webp'), url('imagen.jpg');">
  <!-- Contenido -->
</section>

Rendimiento con vídeos

Los vídeos son mucho más pesados que una imagen:

Elige una calidad moderada (no necesitas 4K para un fondo).
Usa vídeos cortos (10–30 s en bucle suelen ser suficientes).
Mantén siempre mute=1.
Si puedes, valora usar un MP4 autohospedado optimizado; en algunos casos rinde mejor que un embed de YouTube.

Accesibilidad

El diseño bonito no sirve de nada si no se puede leer:

<section class="relative min-h-screen bg-cover bg-center bg-fixed" style="background-image: url('montanas.jpg');" aria-label="Sección con imagen de montañas al atardecer" >
  <!-- Overlay para contraste -->
  <div class="absolute inset-0 bg-black/60"></div>

  <!-- Contenido -->
  <div class="relative z-10 flex items-center justify-center min-h-screen">
    <!-- ... -->
  </div>
</section>

Puntos clave:

Usa overlays para garantizar buen contraste.
Añade descripciones (aria-label, texto visible) cuando el fondo tiene un papel informativo.
No metas texto crítico dentro del propio background (siempre como HTML real).

Comportamiento en móviles (iOS y compañía)

En iOS Safari, background-attachment: fixed está limitado por temas de rendimiento. En la práctica:

Muchas veces el navegador se comporta como si fuera bg-scroll.
El efecto parallax puede no aparecer, pero la sección sigue viéndose bien.

Si quieres forzar que en móviles el fondo no intente ser fixed, puedes usar una regla CSS:

<style>
  @media (max-width: 768px) {
    .bg-fixed-mobile {
      background-attachment: scroll !important;
    }
  }
</style>

<section class="relative min-h-screen bg-cover bg-center bg-fixed bg-fixed-mobile" style="background-image: url('imagen.jpg');">
  <!-- Contenido -->
</section>

De este modo:

En escritorio → parallax clásico con bg-fixed.
En móviles → comportamiento normal (background-attachment: scroll).

Problemas frecuentes y cómo solucionarlos

«El vídeo no se ve»

Revisa que el contenedor tenga esta estructura:

<section class="relative min-h-screen" data-video-id="video-1">
  <!-- Importante: no pongas aquí un fondo sólido que tape el vídeo -->
</section>

Asegúrate de que no haya un background-color sólido en la sección que tape el vídeo fixed.
Comprueba en el inspector que el contenedor .parallax-video-container está en el DOM y recibe la clase .active.

«El vídeo se ve en todas las secciones»

El problema suele estar en el JavaScript:
- El ID del contenedor (id="video-1") debe coincidir exactamente con data-video-id="video-1".
- Asegúrate de que el script se ejecuta cuando el DOM ya está cargado.
- Mira la consola del navegador (F12) para ver si hay errores de JavaScript.

«La imagen parallax no cubre toda la sección»

Asegúrate de usar:

<section class="relative min-h-screen bg-cover bg-center bg-fixed">
  <!-- ... -->
</section>

Sin bg-cover es fácil que se vean huecos si el tamaño de la imagen no encaja.

«El overlay no se ve»

El orden importa:

<section class="relative min-h-screen bg-cover bg-center bg-fixed">
  <!-- 1. Overlay -->
  <div class="absolute inset-0 bg-black/50"></div>

  <!-- 2. Contenido (con z-index) -->
  <div class="relative z-10">
    <!-- Contenido -->
  </div>
</section>

Si el contenido no tiene z-index (por ejemplo z-10) y el overlay sí, el overlay puede taparlo todo.

Resumen y tabla comparativa

Para que puedas decidir rápido qué método usar en cada caso:

Característica	Imágenes (bg-fixed)	Vídeos (fixed + JS)
Complejidad	⭐ Muy simple	⭐⭐ Moderada
JavaScript	❌ No necesita	✅ Sí necesita
Tailwind	Solo `bg-fixed` + layout	Utilities + CSS personalizado
Rendimiento	⚡⚡⚡ Excelente	⚡⚡ Bueno (según vídeo)
Soporte iOS Safari	⚠️ Limitado (`bg-fixed`)	✅ Funciona (es un `<iframe>` fijo)
Nº de instancias	✅ Ilimitadas	✅ Ilimitadas
Mejor para…	Fondos estáticos, fotos	Fondos dinámicos, branding

En muchos proyectos tendrás:

80 % de casos → imágenes con bg-fixed.
20 % de casos especiales → vídeos como fondo para secciones muy concretas.

Recursos recomendados

Si quieres seguir profundizando:

Documentación oficial de Tailwind CSS (backgrounds, layout y helpers).
Parámetros de YouTube Embed (autoplay, loop, branding).
MDN: background-attachment.
“Can I Use”: soporte real de background-attachment: fixed en móviles.

Conclusión

El efecto parallax es una herramienta potente para crear páginas que se sienten vivas y cuidadas. Con Tailwind 4:

Para imágenes, basta con una clase (bg-fixed) y una buena combinación de bg-cover, bg-center y overlays.
Para vídeos, añades un pequeño módulo de CSS + JavaScript y consigues un efecto mucho más cinematográfico.
Puedes combinarlos en la misma página sin conflicto, eligiendo en cada sección el recurso que mejor encaje con tu contenido.

Todo el código que has visto en este artículo es funcional y está pensado para que puedas:

Probarlo tal cual en una página HTML de ejemplo.
Trasladar la estructura a tu entorno WordPress/Bricks + Tailwind 4 sin cambios en las clases.

Si te animas a implementar un parallax en tu proyecto (o ya lo tienes montado), me encantará ver el resultado y saber qué enfoque has usado. Puedes compartirlo en los comentarios o en la comunidad para que lo revisemos entre todos.

Únete a la comunidad

Efecto parallax con Tailwind 4: guía completa para imágenes y vídeos

Qué es el efecto parallax y por qué usarlo

Beneficios del parallax (cuando se usa con cabeza)

Dos formas de crear parallax con Tailwind 4

Método 1: Parallax con imágenes (sin JavaScript)

Estructura básica de una sección parallax

Qué hace cada clase de Tailwind

El overlay oscuro

Otras variaciones de overlay

Ejemplo con varias secciones parallax + contenido normal

¿Por qué funciona `bg-fixed`?

Método 2: Parallax con vídeos de YouTube

¿Por qué necesitamos JavaScript?

Estructura HTML básica

Parámetros importantes del embed de YouTube

CSS necesario para el contenedor de vídeo

JavaScript para controlar qué vídeo se ve

Varios vídeos en la misma página

Ejemplo completo: combinando imágenes y vídeo

Consejos y mejores prácticas

Optimización de imágenes

Rendimiento con vídeos

Accesibilidad

Comportamiento en móviles (iOS y compañía)

Problemas frecuentes y cómo solucionarlos

«El vídeo no se ve»

«El vídeo se ve en todas las secciones»

«La imagen parallax no cubre toda la sección»

«El overlay no se ve»

Resumen y tabla comparativa

Recursos recomendados

Conclusión

Otros artículos que te podrían interesar

@scope en CSS para WordPress + Tailwind: resuelve la especificidad sin romper el sitio

Del wireframe al diseño: Bricks como esqueleto semántico y Tailwind + Flowtitude como acabado final en WordPress

Tailwind vs Automatic.css (ACSS): ¿Quién gestiona mejor la consistencia visual en WordPress?

Únete a la comunidad

Efecto parallax con Tailwind 4: guía completa para imágenes y vídeos

Qué es el efecto parallax y por qué usarlo

Beneficios del parallax (cuando se usa con cabeza)

Dos formas de crear parallax con Tailwind 4

Método 1: Parallax con imágenes (sin JavaScript)

Estructura básica de una sección parallax

Qué hace cada clase de Tailwind

El overlay oscuro

Otras variaciones de overlay

Ejemplo con varias secciones parallax + contenido normal

¿Por qué funciona bg-fixed?

Método 2: Parallax con vídeos de YouTube

¿Por qué necesitamos JavaScript?

Estructura HTML básica

Parámetros importantes del embed de YouTube

CSS necesario para el contenedor de vídeo

JavaScript para controlar qué vídeo se ve

Varios vídeos en la misma página

Ejemplo completo: combinando imágenes y vídeo

Consejos y mejores prácticas

Optimización de imágenes

Rendimiento con vídeos

Accesibilidad

Comportamiento en móviles (iOS y compañía)

Problemas frecuentes y cómo solucionarlos

«El vídeo no se ve»

«El vídeo se ve en todas las secciones»

«La imagen parallax no cubre toda la sección»

«El overlay no se ve»

Resumen y tabla comparativa

Recursos recomendados

Conclusión

Otros artículos que te podrían interesar

@scope en CSS para WordPress + Tailwind: resuelve la especificidad sin romper el sitio

Del wireframe al diseño: Bricks como esqueleto semántico y Tailwind + Flowtitude como acabado final en WordPress

Tailwind vs Automatic.css (ACSS): ¿Quién gestiona mejor la consistencia visual en WordPress?

¿Por qué funciona `bg-fixed`?