Contents on .html page and vscode live-server page appears differently

I am using html and css to create a website for my school project.
I was writing my script by using vscode and everything was fine on the live-server page.
Live Server

However, when I ran the actual .html file through my browser, it appeared differently from my live-server page.
.html file

I think some wrong with {background-image: url("/images/banner.jpeg");} this tag but I'm not sure. Please help!

<div class="banner"></div>


.banner {
   background-image: url("/images/banner.jpeg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
   padding: 200px 1px;
   min-height: 20%;
   }