Unable to load background image in Next.JS

Question

I am new to next.js as I am trying to create website using nextjs I want to add background image on home page but its showing error.I am trying to add image in css style I have image available inside public folder below is my code:

index.js

const Home = () => {
  return(
   <div>
    <section class="sec1">
      <h1>Home page</h1>
    </section>
   </div>
  )
}

export default Home;

globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px; 
}

.sec1{
  background-image: url("../public/banner-food.jpg");
}

Someone let me know how can I resolve this issue.