How to use next/image for backgroundImage for a div block-CodePudding

I am using nextjs. I want use next/image for my background Image for a div. I saw several answers but everyone posting for full screen background image using next/image and not for a single div background image. I got this

But I am getting this

I want the Welcome Home and Tom Text to be over the image. Please help me with some solutions.

CodePudding user response：

You can set the image as background of the div like this :

<div style={{
  height: "500px", 
  position: "relative", 
  backgroundImage: `url(${imgURL})`,
  backgroundSize: "cover", 
  backgroundPosition: "center"
}}>

Or with next/Image :

<div style={{
  height: "500px", 
  position: "relative"
}}>
  <Image
    alt="main"
    src={imgURL}
    fill
    quality={100}
  />
  <div style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    color: "white",
    textAlign: "center"
  }}>
    <h3>Welcome Home</h3>
    <h4>Tom</h4>
  </div>
</div>