Recently, I encountered an issue where the picture I wanted to display was not showing up in Chrome, although it was visible when using VS Live Server. Another problem arose when I used "/"; it worked with VS Live Server but caused the background to not display in other browsers. Can someone help me solve this dilemma?
Below is the code snippet:
html:
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><a class="getstarted scrollto" href="indexAR.html">العربيه</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container" data-aos="fade-up" data-aos-delay="150">
<h1>Plan. Launch. Grow.</h1>
<h2>We hope to create a world where our descendants can enjoy a sustainable future</h2>
<div class="d-flex">
<a href="#about" class="btn-get-started scrollto">Get Started</a>
</div>
</div>
</section><!-- End Hero -->
css:
#hero {
width: 100%;
height: 100vh;
background: url("/assets/img/5secondhome_lon_ii_sca_8820.png") top center;
background-size: cover;
position: relative;
padding: 0;
}