Next.Js Background-Image CSS Property Cant Load the Image

Next.js background-image css property cant load the image

when i used JSX styles then added position absolute property it worked just fine.

Like this:

 <style JSX>{`
    .team {
        width:100%;
        height:100%;
        position:absolute;
        background: url('`+img+`') no-repeat;
    }
`}</style>

Background image in stylesheet not loading Nextjs

Images in Next.js in the public directory can be referred to with public as the base route, so this should work:

background-image: url('/images/mobile-image-hero-1.jpg');

Setting background image to a div in nextjs not working

The solution was to change the path of the image by removing the public path. It was answered here. Change path to /img instead of /public/image. /public is the actual root of the site in this case.

.page-container-welcome {
    height: 100vh;
    position: relative;
    background-size: cover;
    background-image: url("/img/art-thing.jpg");
}

---

Related Topics