Dasmotos Arts & Craft project background image not loading

[dickykitchenjr]

So, I’ve basically completed the project, but one singular thing just isn’t working for some reason.
Inserting an image in the background of the banner at the top of the page.
At first I thought it was because I was using an “img.webp” for the picture vs .jpeg (or something similar), but all the other images work find with that so I no longer think its that.
I’m doing this project with Visual Studio Code on my laptop, so I’m not really sure how to share the entire code, but the relevant parts are:

html:

<div class= "banner">Dosmoto's Arts & Crafts</div>

CSS:
.banner {

font-family: Arial, Helvetica, sans-serif;

font-size: 100px;

font-weight: bold;

color: khaki;

text-align: center;

background-image: url("./resources/images/pattern.webp");

}

I can’t for the life of me figure out why it’s not working. I’ve tried using

instead of

in the html section just to experiment and see if that changed anything. I’ve tried placing the background-image at the top of the .banner list vs bottom with no change. I’ve triple checked the image path to make sure I didn’t mess up there. I’ve checked for solutions online both here, codecademy cheetsheets, and various articles describing how to use background images.
The rest of the included .banner CSS code works fine, it’s just the background-image that isn’t working.
Any help would be GREATLY appreciated. I’m going a little crazy at this point.

[toastedpitabread]

Hi,

Usually the issue in these problems is that the path to the url is slightly off.
If you inspect element and get into the source code of the page you can see where in your path"./resources/images/pattern.webp" is actually pointing.

Check out this link for a bit more information as to how to navigate your address paths: Quick Reminder About File Paths | CSS-Tricks

[dickykitchenjr]

Using VSCode I started by typing background-image: url("/
That started the autofill and allowed me to click the additional steps (vs typing them) to make sure I have the correct path. I’ve verified by opening the path and it does lead to the appropriate picture.
I checked out the link you sent (thanks for that), and followed all of its advice, but still no luck.
Every other picture I’ve used works fine, though they are located in the HTML file vs the CSS file.
I’ve tried adding the picture in the HTML file, just to make sure it works, and it does pop up when I put it in the HTML file.
So the path is correct, and the file does exist and opens properly when using other means, but for some reason it’s still not working when I do it in the CSS file.
I’ve successfully done a work around by using the web address that Codecademy has the picture stored on vs using the locally stored version on my computer. But I know the point of the exercise was to make a locally stored site, so that’s cheating a little.
I’d really like to know why it isn’t working, but honestly I’m at a complete loss.

[toastedpitabread]

Hi,

Can you give us a tree diagram of your project directory structure? We can help more accurately with that.

You’re very close!! Take a break if necessary. But you almost have it.

[dickykitchenjr]

[toastedpitabread]

Try "../images/pattern.webp"

[dickykitchenjr]

Success!.. but why?
I’m not sure I understand why the path I used was incorrect in CSS but correct in HTML.

[toastedpitabread]

Because your index.html is in your big directory dasmoto. So when it writes ./ it’s saying in dasmoto, in resources etc.

Your index.css is in dasmoto/resources/css, so if you say ./ it would look for files in the css directory. ../ would take it up to the parent: resources (where your target of images/ is).

Glad you got it though @dickykitchenjr !

[dickykitchenjr]

Would it be better in the future to have both my index.html and my index.css in the same folder to avoid having this happen?
I’m trying to do best practice now so I establish the best habits and stick to industry standards.
Thanks for all your help @toastedpitabread !

[toastedpitabread]

No, your directory structure is very good!

If you feel like you need practice with it, I would go through the navigating the command line course.

[dickykitchenjr]

Will do. Thanks again for all your help.