How to use Next Image Component instead of CSS Background URL to put an image to a background

[analog adder]

I'm using Tailwind with Next
I have a situation where I use the css background url ( bg-[url('/path.webp')] in tailwind to be precise. But now I run into slow image loading issues. Was wondering if I can use the Next Image component instead hoping it would optimize and improve loading speeds

I have created a minimum reproducible example
https://github.com/cmgchess/next-bg-image

https://stackblitz.com/~/github.com/cmgchess/next-bg-image

Help much appreciated 🙂

[sharp ledge]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[unkempt ibex]

https://nextjs.org/docs/app/api-reference/components/image#props

[analog adder]

not sure how exactly to use it tho

created a stackblitz as well
https://stackblitz.com/~/github.com/cmgchess/next-bg-image

[unkempt ibex]

import Image from "next/image";
import styles from "./home.module.css";

export default function Home() {
  return (
    <>
      <div className={`${styles.gradient}`}>
        <div style={{ height: "calc(100vh - 13vh)" }} className="lg:mr-14">
          <div className="h-4/5 w-full relative hidden lg:block">
              <Image
                src="/hero.webp"
                fill={true}
                alt="Your alt"
                className="object-contain object-right-top"
              />
          </div>

          <div className="h-1/5 flex items-center justify-center w-screen bg-[#2BE94B] text-white text-2xl font-medium text-center leading-normal xl:text-[36px]">
            How can I use Next Image instead of Bg
          </div>
        </div>
      </div>
    </>
  );
}

[analog adder]

willl have a look
thanks!

[analog adder]

@unkempt ibex tried your solution and looks super close
however i would like to retain the div with the image hidden when making screen small
any idea how?
i deployed so you can see for yourself
https://next-bg-image.vercel.app/

right now looks like

[unkempt ibex]

import Image from "next/image";
import styles from "./home.module.css";

export default function Home() {
  return (
    <>
      <div className={`${styles.gradient}`}>
        <div style={{ height: "calc(100vh - 13vh)" }} className="lg:mr-14">
          <div className="h-4/5 w-full relative">
              <Image
                src="/hero.webp"
                fill={true}
                alt="Your alt"
                className="object-contain object-right-top hidden lg:block"
              />
          </div>

          <div className="h-1/5 flex items-center justify-center w-screen bg-[#2BE94B] text-white text-2xl font-medium text-center leading-normal xl:text-[36px]">
            How can I use Next Image instead of Bg
          </div>
        </div>
      </div>
    </>
  );
}

[analog adder]

thank you! this looks much better
https://next-bg-image-git-patch-2-cmgchess.vercel.app/

css is hard 😦