title: Background Image Not Visible when not using live server
body: <h1>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</h1>
  <p>Overall Every Style I applied is working,
  but only the background image of the
  <code>.left</code>
  div inside
  <code>.home</code>
  section</p>
  <hr />
  <blockquote>
  <p><strong>I have tried using CSS instead of SCSS</strong></p>
  </blockquote>
  <hr />
  <p><strong>I have this snippet</strong></p>
  <p><em>Snippet won't work</em>
  <em>as the image is local and if I add external URL then It works</em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .home .left {
        width: 100%;
        height: 100vh;
        background: url("media/bgH.png") no-repeat center fixed;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;HTML&gt;
   &lt;head&gt;
    &lt;/head&gt;
   &lt;body&gt;  
      &lt;section id="home" class="home"&gt;
            &lt;div class="left"&gt;
              &lt;div class="container"&gt;
    &lt;/body&gt;
  &lt;HTML&gt;</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <p>I tired swapping
  <code>background: url(&quot;media/bgH.png&quot;) no-repeat center fixed</code>
  for
  <code>background: url(&quot;./../../media/bgH.png&quot;)</code>
  and also to
  <code>background: url(&quot;../../media/bgH.png&quot;)</code></p>
  <hr />
  <p><strong>This link is for the GitHub Page</strong></p>
  <blockquote>
  <p>maybe this link will help
  <a href="https://kushagra-aa.github.io/portfolio/" rel="nofollow noreferrer">HERE!</a></p>
  </blockquote>
  <hr />
  <p><strong>This The folder structure</strong>
  <a href="https://i.stack.imgur.com/JhMC5.png" rel="nofollow noreferrer">HERE!</a></p>