CSS Images In another Folder

Question

I added the images into the folder called "images" and CSS to folder called "css", now I want to use the images in "images" folder. How do I do this? When I used this, they didn't show up:

background: url('/images/bg.jpg');

I also tried these:

background: url('../images/bg.jpg');
background: url('../../images/bg.jpg');

What is the path I should be using to access my images?

is image folder in the same working directory? I mean is image folder and currentpage.css(the page in which you are using above code ) in same folder? — Ritesh Kumar Gupta, Apr 03 '13 at 10:55
Here is the same question answerd [http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to](http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to) . i hope it helps — winner_joiner, Apr 03 '13 at 10:57
Hey, did you find a better answer, than share or accept one of these. THX — winner_joiner, May 08 '13 at 07:55

score 22 · Answer 1 · answered Apr 03 '13 at 11:00

If you have a folder structure like follows:

/public_html/
    /css/
    /images/
    /index.html

Then your CSS should work.

Starting with "/" returns to the root directory and starts there

Starting with "../" moves one directory backwards and starts there

Starting with "../../" moves two directories backwards and starts there (and so on...) To move forward, just start with the first
subdirectory and keep moving forward

Read more here: http://css-tricks.com/quick-reminder-about-file-paths/

score 2 · Answer 2 · edited May 23 '17 at 12:32

2

Here is the same question answerd https://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-l‌ocation-is-it-relative-to.

here is the W3C spec from the answer http://www.w3.org/TR/REC-CSS1/#url

With other words it depences on the Folder Structur, as commented under your Post, by Sport Billy.

i hope it helps

edited May 23 '17 at 12:32

Community

1
1

answered Apr 03 '13 at 10:58

winner_joiner

12,173
4
36
61

score 1 · Answer 3 · answered Apr 03 '13 at 10:56

1

When you use background-images, make sure you give width and height too for the container containing the images.

answered Apr 03 '13 at 10:56

defau1t

10,593
2
35
47

Is this an answer for the problem? Maybe just a tip. – emerson.marini Apr 03 '13 at 10:56
It is an answer. Not a tip. I am sure you haven't faced this issue. – defau1t Apr 03 '13 at 10:58
The question here is about folders, not best (correct) practices. That's what I meant. – emerson.marini Apr 03 '13 at 11:00
3

It is not only suggesting the correct practice, but is answering to the problem of the OP which is that the background image not being displayed. He says that he tried different approaches and none worked, so it might be because he has not specified width and height. – Vassilis Barzokas Apr 03 '13 at 11:11
@Sport Billy +1 because you are right. I personally would have written this in the comment section of the question, but it is a vaild answer. – winner_joiner Apr 03 '13 at 14:08

CSS Images In another Folder

3 Answers3

Linked