Dasmoto's Arts and Crafts background-image url path

In working on the Dasmoto’s Arts and Crafts project, I found that while the local file img elements looked good, that the local file background-image element did not initially render, leaving a white background.

The cause, if this helps anyone (my search found 5 Codecademy threads for this dating back to 2019), is that file paths are relative, meaning that if an image file is in the resources folder, the path to an image file there depends on the location of the file accessing that image:

Path to an image file (in resources/) from index.html
<img src=“./resources/hacksaw.webp”/>

Path to an image file (in resources/) from resources/css/style.css
background-image: url(“…/…/resources/pattern.webp”);

That’s why “…/…/” is used, to climb out of the nested resources/css/ folder.

The Codecademy provided project solution skirts this by using fully qualified urls
background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg”);

Good coding!
Jacob

We can get around all those relative paths by storing CSS background images in the CSS folder.

./css/
    skin/
        pattern.jpg
    styles.css

Now your style sheet doesn’t have to traverse a bunch of levels, only reach into a folder that is readily at hand. How does it get any easier?

header {
  background-image: url(skin/pattern.jpg);
}

It follows that the alternate prescribed regime would render,

header {
  background-image: url(./skin/pattern.jpg);
}
1 Like

That was the crux of it, in that previously all of my index.html and style.css files were in the same folder, so there was no difference in the image path between index.html and style.css, but moving style.css to, as the assignment laid out, resources/css/, then the image paths differed between index.html and style.css (img in index.html and background-image in style.css)

Devtools helped by inspecting the element and then attempting to open it. VS Code also assists, maybe through the Intellicode extension, by suggesting autocomplete paths.

Also, file paths are a good thing. I was taught to always start relative paths with . for assurance. Attention to detail.

@mtf : I get a lot out of reading your posts, thanks for all the next level ideas!

2 Likes