I haven't used Next.js before and I'm having trouble setting a background image for a specific div. I have a folder named public in the root directory where I've placed the file art-thing.jpg. My styles.css is also in the root directory, while my index.js can be found in the pages directory within the root directory. I've managed to set the background to a color but can't seem to get it to display an image. I came across a similar issue posted online but I prefer not to inline my CSS.
Here is a snippet of my styles.css:
html {
scroll-behavior: smooth;
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
.page-container {
height: 100vh;
position: relative;
}
.page-container-welcome {
height: 100vh;
position: relative;
background-size: cover;
background-image: url("/public/img/Branding/art-thing.jpg");
}
.content-wrap{
padding-bottom: 2.5rem;
}
And here is my index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import Head from 'next/head';
import HekateNav from "../client/components/nav";
import Footer from "../client/components/footer";
function Home() {
return (
<div>
<Head>
<title>Hekate</title>
</Head>
<div className="page-container-welcome">
<div className="content-wrap">
<HekateNav/>
</div>
</div>
<Footer/>
</div>
);
};
export default Home
I encountered this console error:
DevTools failed to load SourceMap: Could not load content for http://localhost:3000/_next/static/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE