Next.js Discord

Discord Forum

How do I make a proper page background?

Answered
PunchedYou posted this in #help-forum
Open in Discord
PunchedYouOP
My attempt to make one (failed):
import Image from "next/image";

const Home = () => {
  return (
    <div>
      <div className="w-full h-full relative">
        <Image
          src="/assets/home-bg.jpg"
          alt="Background Image"
          quality={100}
          height={100}
          width={100}
          sizes="100vw"
          className="object-cover brightness-50"
          layout="responsive"
        />
      </div>
      <div className="absolute start-0 inset-x-50">
        <p>test</p>
      </div>
    </div>
  );
};

export default Home;
Answered by Netherland Dwarf
I think you have to remove the layout property
View full answer

10 Replies

PunchedYouOP
Want also element on top of it obviously
Netherland Dwarf
You can use the property fill
And parent container is 100vh and 100%width
@Netherland Dwarf You can use the property fill
PunchedYouOP
how can I fix this I just added fill and removed height and with properties
Netherland Dwarf
Can you show the updated code
PunchedYouOP
import Image from "next/image";

const Home = () => {
  return (
    <div>
      <div className="absolute h-full w-full inset-0">
        <Image
          src="/assets/home-bg.jpg"
          alt="Background Image"
          quality={100}
          fill
          className="object-cover brightness-50"
          layout="responsive"
        />
      </div>
      <div className="absolute start-0 inset-x-50">
        <p>test</p>
      </div>
    </div>
  );
};

export default Home;
Netherland Dwarf
I think you have to remove the layout property
Answer
PunchedYouOP
kk I will try
yeah works now
ty