How to fix CSS background image not working?

Question

I am trying to place a background image for a personal webpage and I have yet to find any solutions for my issue. All I get is a white background.

File path for image: /personal-page/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg

File path for code: /personal-page/style.css

Here is my code:

CSS

#hero{
    background-image: url(/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);
    background-size: cover;
    background-position: top center;
    position: relative;
}

HTML

<!-- Hero Section -->
<section id="Hero">
    <div class="hero container">
        <div>
            <h1>Hello, My Name is Isaac</h1>
            <a href="#" type="button" class="cta">Portfolio</a>
        </div>
        
    </div>
</section>
<!-- End Hero Section-->

Answer 1

first change the id="Hero" in your html to id="hero" (with small h). secondly change the path to a relative path in your css ./images/test.jpg (add the point)

html become

   <section id="hero">
        <div class="hero container">
            <div>
                <h1>Hello, My Name is Isaac</h1>
                <a href="#" type="button" class="cta">Portfolio</a>
            </div>
            
        </div>
    </section>

css become

#hero{
background-image: url(./images/test.jpg);
background-size: cover;
background-position: top center;
position: relative;
 }