No puedo crear una imagen de fondo fija (efecto paralelo) usando Tailwind CSS + Next.js Image.
Puedes verlo en acción en este tema de Template Monster .
Este es el código que he probado:
<section className="stats w-full h-48 relative"> <div className="absolute top-0 right-0 bottom-0 left-0 object-cover bg-cover"> <Image layout='fill' src={data.backgroundImageUrl} /> </div> <div className="relative z-10 flex flex-col items-center"> <div>Stat 1</div> <div>Stat 2</div> <div>Stat 3</div> <div>Stat 4</div> </div> </section>Y no funciona. La imagen se adjunta a la sección y no hay efecto de paralaje.
Puedo reemplazarlo con:
<div className="aboslute top-0 right-0 bottom-0 left-0 object-cover bg-cover" style={{ backgroundImage: `url(${data.backgroundImageUrl})` }} />Y funciona. Pero luego no optimiza la imagen y mi puntaje de SEO cae en el faro.
¿Cómo puedo usar next/image junto con TailwindCSS para el efecto de paralaje de los fondos de sección?
Puede probar algo como estohttps://stackblitz.com/edit/nextjs-aye7nj?file=pages%2Findex.js Crear contenedor con propiedad clipPath y contenedor con posición fija.
<div style={{ position: 'relative', height: '60vh', width: '100%', clipPath: 'inset(0 0 0 0)', }} > <div style={{ position: 'fixed', height: '100%', width: '100%', left: '0', top: '0', }} > <Image src="https://images.unsplash.com/photo-1630496128261-27ce4ab6ad76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" layout="fill" objectFit="cover" sizes="100vw" /> </div> </div>