Currently, I am working with nextjs and I am trying to set a background Image for a specific div using next/image. Most of the sources I found only explain how to implement full screen background images with next/image, not for a single div. I stumbled upon this resource https://uharston.medium.com/next-js-image-optimization-on-background-images-65de18ea03f5, but it focuses on full-screen backgrounds. Although I can use a normal background image, it lacks the optimization benefits of next/image.
The code snippet I've attempted is as follows:
import Image from 'next/image'
export default function Home() {
const imgURL = "https://i.postimg.cc/kXb4L4hB/abstract-blur-empty-green-gradient-studio-well-use-as-backgroundwebsite-templateframebusiness-report.jpg"
return (
<div style={{ backgroundColor: "black", height: "100vh" }}>
<h1 style={{ color: "white", textAlign: "center" }}>Home Page </h1>
{/* Background Image */}
<div style={{ height: "500px", position: "relative" }}>
<Image
alt="main"
src={imgURL}
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
/>
</div>
{/* Content should come over image */}
<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
<h3 style={{ color: "white" }}>Welcome Home</h3>
<h4 style={{ color: "white" }}>Tom</h4>
</div>
</div>
)
}
I am aiming for a design like this: https://i.sstatic.net/Y1bZX.png
However, my current outcome resembles this: https://i.sstatic.net/MJsni.png
My goal is to have the text "Welcome Home and Tom Text" displayed over the image. Any assistance in achieving this would be greatly appreciated.