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-->

score 1 · Accepted Answer · answered Oct 19 '22 at 17:09

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;
 }

answered Oct 19 '22 at 17:09

mahmoud ettouahri

141
4
13

oh and be sure that your css file path is correct (try changing the p colors to be sure) – mahmoud ettouahri Oct 19 '22 at 17:10
The #Hero id was the problem. Spent hours trying to fix this over a capitalization error. Thank you so much!! – Scruggs-I Oct 19 '22 at 17:16

score 0 · Answer 2 · edited Oct 22 '22 at 00:11

0

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');

edited Oct 22 '22 at 00:11

Michael M.

10,486
9
18
34

answered Oct 19 '22 at 16:51

Filipe Mendonça

1
1

Applied it and nothing changed, not sure what it could be. – Scruggs-I Oct 19 '22 at 16:54

score 0 · Answer 3 · answered Oct 19 '22 at 16:53

0

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

answered Oct 19 '22 at 16:53

Juandres Yepes Narvaez

154
5

Seems like any type of quotation doesn't change the outcome. – Scruggs-I Oct 19 '22 at 16:55

How to fix CSS background image not working?

3 Answers3