How to add full page background image in NextJS - reactjs

Question

I'm trying to add a background image to an entire welcome page in NextJS and it's just not working. Before, I was having trouble with the fact that NextJS seems to render every component inside a master component that becomes an html div with a class of "__next". Therefore, every time I try and add a background image that takes the full page, it is only as big as the "__next" div and is cut off. I tried using NextJS' image component, but now it doesn't even load the image and just displays the alt text. Can anyone tell me how to fix the following code?
import React from "react";
import styles from "/styles/WelcomePage.module.css";
import Card from "/Components/Card";
import Link from "next/link";
import Image from "next/image";
function WelcomePage() {
return (
<>
<Card>
<h1 className={styles.title}>Welcome to Class Chooser</h1>
<button type="button">
<Link href="/ClassSearch"> Class Search </Link>
</button>
<Image
src="/images/graduates.jpg"
alt="Cartoon graduates jump with happiness"
quality="100"
layout="fill"
/>
</Card>
</>
);
}
export default WelcomePage;

Answer 1

To add a background image simply do it via CSS:
.card {
background-image: url("/images/graduates.jpg");
}

Answer 2

make your parent component (Card) position relative and add below properties to next-image.
layout="fill"
objectFit="cover"
position relative should be there for which you need to apply image as a background.

Answer 3

When you add layout="fill" to Image you need to wraper Image component in parent element and assing postion property to parent (relative, absolute, ...).
Wrap your Image inside a parent div, and make your parent position fixed
<div className="bg-image-wrapper">
<Image
src="/images/graduates.jpg"
alt="Cartoon graduates jump with happiness"
quality="100"
layout="fill"
/>
</div>
In css
.bg-image-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}