Next.js Discord

Discord Forum

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

Answered
Western Meadowlark posted this in #help-forum
Open in Discord
Avatar
Western MeadowlarkOP
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 🙂
Answered by ReverseGem7
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>
    </>
  );
}
View full answer

8 Replies

Avatar
ReverseGem7
https://nextjs.org/docs/app/api-reference/components/image#props
Avatar
Western MeadowlarkOP
not sure how exactly to use it tho

created a stackblitz as well
https://stackblitz.com/~/github.com/cmgchess/next-bg-image
Avatar
ReverseGem7
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>
    </>
  );
}
Avatar
Western MeadowlarkOP
willl have a look
thanks!
Avatar
Western MeadowlarkOP
@ReverseGem7 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/
Image
Image
right now looks like
Image
Avatar
ReverseGem7
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>
    </>
  );
}
Answer
Avatar
Western MeadowlarkOP
thank you! this looks much better
https://next-bg-image-git-patch-2-cmgchess.vercel.app/

css is hard 😦