Hi, I just cannot for the life of me find out why my background image does not display, please help!

So my code looks like this but I just cannot figure out where I went wrong.

html:

Dasmoto's Arts & Crafts

The corresponding CSS part looks like this:

#header-background {
display: inline-block;
background-image: url(‘/resources/images/pattern.jpeg’);
background-repeat: repeat-x;
background-color: white;
width: auto;
height: 100%;
position: relative;
display: block;
}
I would really appreciate some insight on this!

Thanks in advance!

Somehow my message got cut in half, so here is the html part:

<header id="header-background">
    <div class="header-image">
        <h1>Dasmoto's Arts & Crafts</h1>
    </div> 
</header>

thanks again!

Hey @blog4603275343
Just to be sure try to verify again that pattern.jpeg is in Images folder and that folder is in the resources folder if that is the case then it might be because you used these character in the url‘’ instead of quotation mark "" or apostrophe ''

Code_oMKatKpNfV

This is what VS Code shows when I hover my cursor on it and auto completion doesn’t function, but the same folder path inside this "" or this '' and the background image appears

Hope that helps.

1 Like

Hi @nab-sa! Thanks for answering so swiftly, I have tried substituting the characters with " yet I get the same problem, the text is there yet there is only a white background. I have tried to change the directory but nothing has helped so far.

Are you coding on VS Code ? If so, can you share a screenshot of the file explorer with all the files that are inside folder appearing ? (it’ll appear by doing Ctrl + Shift + E )


@nab-sa here you go! I really hope this is solvable, I’ve lost quite a few hairs today trying to fix this…

I found the solution! It was indeed a pathing error, I was missing /…/… at the beginning!

1 Like

That’s great !

Next time try putting all the images inside one folder and give each folder a specific name it will make things easier for you if you have a problem with folder path again.

1 Like

Thanks for the heads-up, I will do so in the future!