Background Image Not Visible when not using live server

I'm using Vs code with live server extension But When I open the HTML file or on GitHub pages The out does not show the background image

Overall Every Style I applied is working, but only the background image of the .left div inside .home section

I have tried using CSS instead of SCSS

I have this snippet

Snippet won't work as the image is local and if I add external URL then It works

 .home .left {
      width: 100%;
      height: 100vh;
      background: url("media/bgH.png") no-repeat center fixed;
    }

<HTML>
 <head>
  </head>
 <body>  
    <section id="home" class="home">
          <div class="left">
            <div class="container">
  </body>
<HTML>

I tired swapping background: url("media/bgH.png") no-repeat center fixed for background: url("./../../media/bgH.png") and also to background: url("../../media/bgH.png")

This link is for the GitHub Page

maybe this link will help HERE!

This The folder structure HERE!

Solution

The url is incorrect, try using:

  background: url("./media/bgH.png") no-repeat center fixed;