Background images

🆘 Support
,
1

I’m trying to create a hero with a background image, dark overlay and text. For the image, I’m using the react Image component made available by the react-datocms library. But I’m not sure how to then use the image as a background image. As described here, and following the answer to this question, I’m using layout=“fill”, but the text is hidden behind the image; it’s not visible.

This is my code (using a react component and tailwindCSS):

            <div className="relative w-[320px] h-[320px]">
                <Image
                  data={hero.image.responsiveImage}
                  layout="fill"
                  objectFit="cover"
                />
                <h2>{hero.title}</h2>
            </div>

is it possible to take a responsive image from DatoCMS and use it to introduce a background image using CSS? My ultimate goal is to render the image with an overlay and text on top.

2

Ok, I was able to resolve the issue adding a background behind the text:

            <div className="relative w-[320px] h-[320px]">
                <Image
                  data={hero.image.responsiveImage}
                  layout="fill"
                  objectFit="cover"
                />
                <div className="absolute bg-gray-800 opacity-70">
                    <h2>{hero.title}</h2>
               </div>
            </div>
1 Like