Relative Path Background Image Problem in CSS

When I am trying to create a background image in CSS from a file downloaded to my computer, I can’t make it appear when I open my HTML file in the browser. If I use the online URL of the image, there is no problem, so I’m thinking the issue must be how I am designating the relative path.

The code I currently have is:

.desmoto {

background-image: url(“Resources/pattern.jpg”);

}

The relative path on my computer to the image is: “Code Academy/Desmodo’s Arts and Crafts/Resources/pattern.jpg”.

The relative path to my CSS file is"Code Academy/Desmodo’s Arts and Crafts/Resources/CSS/index.css"

The exercise I am working on is: https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/build-websites-on-your-own-computer/modules/local-website-development/projects/dasmoto

Hi,

You can’t use simply “Resources/pattern.jpg” otherwise the browser will try to look for an image with the following path:

Code Academy/Desmodo’s Arts and Crafts/Resources/CSS/Resources/pattern.jpg

You should use ‘…’ to navigate up one level of folders. So your code should look similar to:

background-image: url("../pattern.jpg");

Hope that helps!

2 Likes

That makes sense of why it worked when I had the CSS in my HTML doc and stopped working when I put the CSS is a separate file and liked them. Thank you!

1 Like

thanks, I had the same problem, and i was trying to do it like you stated but i was using ./pattern was missing “.”