Trouble with the relative path to the background-image - Dasmoto's Arts & Crafts

Hi, everyone.
I’m doing the Off-Platform Project: Dasmoto’s Arts & Crafts (https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-developing-websites-locally/modules/wdcp-22-developing-with-css/projects/dasmoto) and everything is looking great, except for the background-image to the h1 title. There’s something wrong with the relative path to the image. I organized the files like this:

Project_2 (file)
Index.html
Recursos (file)
Css (file)
Index.css
Imagens (file)
pattern.jpeg

The relative path I’m using for the background-image is: url (“/Recursos/Imagens/pattern.jpeg”). When I click on this on the VS Code, the image renders perfectly but it doesn’t show on the browser. I tried different relative paths like: url (“…/pattern.jpeg”), (“./pattern.jpeg”), (“/pattern.jpeg”) and (“pattern.jpeg”). None of those worked. And tthe image wouldn’t render on VS Code either.

I have no clue why isn’t working. Could any of you help me figure it out?
Thanks.

Hi!
This is how I understand your file structure, so to access your image, inside of the images folder from index.html, I’m 79% sure you would use ./Recursos/Imagens/pattern.jpeg

:file_folder: Project_2 (file)

  • :newspaper:Index.html

:file_folder: Recursos (file)

  • :file_folder: Css (file)

    • :newspaper: Index.css
  • :file_folder: Imagens (file)

    • :newspaper:pattern.jpeg

Quote from Docs V https://www.codecademy.com/resources/docs/general/file-paths

Relative file paths specify the location of a file in the same folder or on the same server. In other words, a relative file path specifies a location of a file that is relative to the current directory. Some examples of relative file paths are:

  • ./about.html
  • ./js/script.js
  • ./scripts/main.py

Relative file paths use a dot notation at the start of the path, followed by a path separator and the location of the file. A single dot (.) indicates the current directory, and a double dot (…) indicates the parent directory. For example, in Linux, ./ tells the program to look for the file from the current directory, and ../ tells the program to go up to the parent directory before looking for the file.

Thanks for your answer. Unfortunally, the background image didn’t render on the browser.

oh no! Do you mind sharing a screenshot or snippet of your code?

Not at all. Here it is:

1 Like

Thanks! Because you’re accessing the /Recursos/Imagens/pattern.jpeg file from the /Recursos/Css/Index.css you don’t need to go back to the parent directory Recursos! You’re already there in index.css!

Heres a screenshot of how I set it up! I hope this helps!
CSS linked in HTML head

Background image for h1 element

2 Likes

Thanks a lot! I did set it up slightly different but it’s working now. Below there is the html snippet I changed and it’s fully working now. The css relative path I set like yours.

1 Like

I have another question, though. In the html file I didn’t use the type=“text/css” because when I did, the VS Code was telling me there were 2 errors, even though the background-image rended normally. The image below shows that:

So I didn’t use the style. Do you know why that happened? Is there any problem if I don’t use the style?

Again, thanks a lot.

1 Like

I honestly hardly use type="text/css" :rofl:
It was in the solution code, so I left it there haha.

But I found this from W3Schools

The type attribute specifies the media type of the linked document/resource.

The most common value of type is “text/css”. If you omit the type attribute, the browser will look at the rel attribute to guess the correct type. So, if rel=“stylesheet”, the browser will assume the type is “text/css”.

1 Like

I found out that the dots will navigate you back a folder. So lets say your folder hierarchy is a folder called website that contain your html file and a file called resources. In that resource folder you have a css folder and an image folder.

->Website (folder)
website.html
->Resources(folder)
->Images(folder)
Image.jpg
->css (folder)
stylsheet.css

In order to navigate out of the css folder that your .css file is in you have to add an additional dot to first move back into the resources folder and then you can direct the url tag to the images/image.jpg file. So in this case the complete url is

…/images/image.jpg.
[ . (first dot to navigate back a folder) ./images/image.jpg (normal path to the file)]

If you wanted to navigate back another folder you would just add another dot (…/images/image.jpg)

Thanks for the reply!