I've encountered an issue while attempting to create a fixed background image with a parallax effect using Tailwind CSS and Next.js Image.
If you need to see an example of this in action, check out this Template Monster theme.
Here's the code snippet I experimented with:
<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>
Unfortunately, it didn't produce the desired parallax effect as the image is attached to the section.
As a workaround, I resorted to the following solution:
<div className="aboslute top-0 right-0 bottom-0 left-0 object-cover bg-cover"
style={{
backgroundImage: `url(${data.backgroundImageUrl})`
}}
/>
This method worked but it led to decreased image optimization and negatively impacted my SEO score according to Lighthouse metrics.
My question now is how can I effectively combine next/image with TailwindCSS to achieve a parallax effect on section backgrounds?