Dasmotos Arts & Craft project background image not loading

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.

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

2 Likes

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.

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.

Try "../images/pattern.webp"

1 Like

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

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 !

1 Like

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 !

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.

1 Like

Will do. Thanks again for all your help.

I am getting the same problem and none of the solutions here are helping. I am using VC

HTML:

    <h1 class="title">Dasmoto's Arts & Crafts</h1>

CSS:
.title_div {

background-image: url("C:\Users\OurNews Online\OneDrive\Documents\Codecademy\Dasmoto\images\CSS1.jpeg");

}

I resorted to using the full URL but it won’t help

Hi,

Incredibly often in programming backslashes are used as escape keys. This means that they escape the following 1 character. For this reason for urls it’s better to use a forward slash.

Hi there,
I have built the web on html, but when came to css I have got stuck on linking the index.html document to the index.css
please can I get help on this?

Hi please share your code if you wish for someone to help you specifically. (Also note that you should format it before you paste it. The instructions are here: [How to] Format code in posts)

I was having the same issue… as most people were. If i used the full path which is discouraged it displaed fine. I didnt have my images in their own folder, althogh I am sure that is best practice, it doesnt seem like there will be any other “resources” in this folder for htis project.
“…/pattern.jpeg” worked for me in the end. Thank you to all.