CSS Background-Image URL

Question

When writing CSS Style for body I encountered a problem and was wondering if anyone can explain the difference.

when I used this

 body {
 background-image: url('img/bg.png');
 }

but when I used this

 body {
 background-image: url('../img/bg.png');
 }

It works fine. I'm quessing it might be because it is in a folder I have to use the '../' but I just wanted to ask to be sure.

Yep, it has to do with the file location... you can always use an absolute URL to avoid those issues though.. — Josh Crozier
– Josh Crozier, Commented Nov 6, 2013 at 20:03
The ../ at the beginning of the file name takes you up 1 folder from the current folder. If you just have the slash / at the beginning of the file name it will take you up to the root folder. — Vincent James
– Vincent James, Commented Nov 6, 2013 at 20:05

Oleksandr Savchenko · Accepted Answer · 2017-05-09 09:46:29Z

2

Ordinary project structure look like this:

index.html
css/
    style.css
img/
    bg.png

When you use

background-image: url('img/bg.png');

that means that location of the image is css/img/bg.png, and when you use

background-image: url('../img/bg.png');

that means that that location of the image is img/bg.png (../ - one level higher from current folder, ../../ two levels higher, etc)

answered Nov 6, 2013 at 20:14

6913 gold badges12 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1