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
Project_2 (file)
Index.html
Recursos (file)
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?
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" 
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
