Need help understanding the background-image: url(); please

In the Dasmoto’s Arts and Crafts project (https://www.codecademy.com/projects/practice/dasmoto) I used background-image but really struggled to get it to work, then finally did. Can you explain what I did wrong at first and why that didn’t work and then why my solution did work?

Firstly my index.css file is located (resources/css/index.css)
and my images are located (resources/images/…)

I started with:

background-image: url(/resources/images/pattern.jpeg);

After googling and trying a few different variants I ended up with this one that works:

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

But I have no idea why that works or what the …/ means, if you could explain please.
Thank you for your time.

../ points to the parent directory (up one level). It is a relative path; that is, in relation to the current directory, one level up.

/ points to the volume root on a local machine, and the site root on a web server.

1 Like