File paths is CSS

Hello!

I’m working on Dasmoto’s arts & craft project and i’m stuck on making a file path in css for a background image.
I downloaded the image into the pictures folder of the directory. So anyway, the picture does not load. What am I doing wrong?

directory:
/Arts
index.html
/pictures
all the images
/resources
/CSS
index.css

css file:

h1 {

background-image: url("/pictures/pattern.jpeg");
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;

}

when I move the image to the css file and link it as: background-image url(“pattern.jpeg”) it is working fine.

Try it with a dot in front of the first slash:
background-image: url("./pictures/pattern.jpeg");
That is indicating that you’re coming the same directory.

If one dot isn’t working try to put two dots which leads to the parent directory.

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

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

I tried the above but it didn’t work so i tried this and it works:

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

can someone explain how this works though?

Three dots won’t work in any case.
The file structure you wrote down indicates that the css file is located in the same directory as the folder ‘pictures’. Therefore one dot and a slash would be the correct path. If that doesn’t work, check if the css is really located in the same directory or if you have a spelling mistake.
One dot followed by a slash: The targeted folder is located in the same directory as the file where the path is defined.
Two dots followed by a slash: The css file is located in a subdirectory. With two dots you’re moving up one level.

the pictures file was up 2 directory’s, there was my mistake. i figured out how it works now. thanks for the help

Blame Discourse for that. The code is not formatted so the editor changes .. to ....

Oh, ok, thanks. I know that the editor eats backticks from unformatted code, but I wasn’t aware of that.

1 Like