CODEWITHSUNDEEP
next.js
DGB
DGB

Reputation: 1342

Background image in stylesheet not loading Nextjs

My root for images is /public/images/MY_IMAGE.JPG

I want to load a background image using CSS.

My code:

.mobile-image-hero-1 {
  background-image: url('/public/images/mobile-image-hero-1.jpg');
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
}

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

I'm rendering via class name

<header className='mobile-image-hero-1 h-48'>

I just want an easy way to have a div background image.

P.S I have looked at other answers on here to no prevail.

Upvotes: 1

Views: 961

Answers (1)

Cassidy
Cassidy

Reputation: 3418

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');

Upvotes: 1

Related Questions