Dasmoto's arts project

Hello dear people,
I have been doing the webdeveloper course for the last few days and got stuck at this excercise.
LINK: Dasmoto

I have problems getting the pattern.jpeg image to show up at all! The path name I use should be working since when I ctrl + click it in VS Code it shows me the image I need.(I am on a Windows 10 machine) After messing about with way to complicated code for such a simple problem I decided to take a peak at the example from the course itself with Chrome Dev Tools.

I then used the exact same code(ofcourse with my own file path) and it still doesnt work! I am wondering what I am missing. :confused:

HTML code:

<h1>Dasmoto's Arts & Crafts</h1>

CSS code:

h1 {
    background-image: url("..\images\pattern.jpeg");
    text-align: center;
    font-size: 100px;
    color: khaki;
}

Lets see what I can learn from my mistakes.

EDIT:
I now see this when I inspect my own html page.


It seems like the actual path for the background gets modified when the browser wants to open it. When I click on the gray file path bottom right at background-image, it says that it cannot find the image. How can I fix this?

Apparently the link it tries to open is: /D:/CodeAcedemy/Dasmoto/resources/css/…imagespattern.jpeg.
This makes no sense to me.

This is how I did it:

h1 {
background-image: url(“pattern.jpeg”);
text-align: center;
font-size: 100px;
color: khaki;
font-weight: bold;
}

I don’t think you need the whole address since the program looks in the folder you have open for the image.

This is the folder structure I use:
Folders

What you suggested does work! It also works on my project, but I was trying to keep the images in a seperate folder as I imagine they would be in a real world project. Still haven’t gotten that to work.

Still, thanks for your answer!

Glad that’s working. You bring up a very good question about keeping the image in another folder.

You can use a relative path like “resources/images/pattern.jpeg” when the web page is being hosted on a server as a live site or being tested on a local web sever that is running on your own machine. The relative path works because it starts at the site’s root and goes from there.

But when you open index.html in your browser as a file (that’s what I’m doing too for this project), the site root is different. The “resources” folder isn’t just one level down from the root – you now need the full path. The full path starts at the file system’s root.

I’m not familiar with Windows but to get the full path on a Mac you right click on the file name, hold down the Option key, and select Copy Pathname. Maybe someone familiar with Windows can explain how to do this!

The problem with full paths on a real-life project is that they will have to be changed when the project goes live. This is where testing your work on your own local server comes in handy – you get to use relative paths.

2 Likes

Thanks for explaining that to me, I saw hints of what the browser wanted but did not connect all the dots! Your explanation did connect those pesky dots for me! Wonderful! :slight_smile:

I will have to look into running a local webserver to test future projects. You have given me something to aim for, thanks again! :smiley:

EDIT:
I have installed the Live Server plugin for Visual Studio Code, trying to work out stuff with that.

1 Like

I had this problem too. I finally cracked it by repeatedly changing the path and refreshing the page, and then inspecting the URL the browser was trying to call in Firefox’s inspector (dev tools).

The problem was I kept using a relative path to pattern.jpeg from index.html, assuming this would work. But the image is actually being called within your css file, not from your index.html file. Therefore, you need to think about the path relative to where your css file is located, not your html page.

The folder structure you used in your screenshot would make this the relative path to the image:

../images/pattern.jpeg

This was a really important lesson for me, because just like you, I wanted to emphasize using a correct folder structure to separate the resources for the project. So putting everything into the same folder would have felt like a cheat and I wouldn’t have learned anything.

Happy coding!
serraphus

5 Likes

Since the image is being referenced by the index.css file, the URL has to be relative to the index.css file, therefore it has to be coded as
background-image: url("…/…/resources/images/pattern.jpeg");

THIS !!
Thanks for your comment, I had the exact same problem :slight_smile:

Thanks, this was very helpful!

Thansk! Finally it works!