How to fix CSS background image not working?-CodePudding

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 >
        <div>
            <h1>Hello, My Name is Isaac</h1>
            <a href="#" type="button" >Portfolio</a>
        </div>
        
    </div>
</section>
<!-- End Hero Section-->

CodePudding user response：

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 >
            <div>
                <h1>Hello, My Name is Isaac</h1>
                <a href="#" type="button" >Portfolio</a>
            </div>
            
        </div>
    </section>

css become

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

CodePudding user response：

If i'm not mistaken this :

background-image: url(/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);

Should be this :

background-image: url('/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg');

CodePudding user response：

#hero{
    background-image: url("images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg");
    .
    .
    .
}