I've been struggling to add a background image to a section despite trying various solutions I found on Stackoverflow. Here is the current code that I have:
import Image from '../../public/images/header2.jpg';
const Home: React.FC = () => {
return (
<main className="super-donnie-bg-slate">
<section id="first" className="bg-no-repeat bg-bottom bg-cover px-4 md:px-8" style={{ backgroundImage:`url(${Image})`,backgroundRepeat:"no-repeat" }}>
<div className="container max-w-xs w-full md:max-w-sm lg:max-w-md xl:max-w-lg mx-auto pt-24 pb-96 "><img className="mb-8 max-w-full w-64 sm:w-full mx-auto" src="/images/fungifimage.gif" alt="Super donnie"></img>
<div className="mb-8">
<div className="super-donnie-text-yellow flex justify-between w-full mb-4"></div>
</div>
<p className="text-center text-2xl leading-tight super-donnie-font-press-start-2p ">text here.</p>
</div>
</section>
Currently, I can display images within a div successfully, but setting a background image for the section remains a challenge.