Folder structure in CSS

Question

Can anyone please help.

I am refreshing my knowledge of HTML and CSS (its been 4 years since I worked with these languages) and I am having trouble referencing images in a folder structure that I have. The enclosed image shows the folder structure that I have for my project.

What I want to do is from my index.css file in my CSS folder, use the following line of code to access an image, Logo 1.png, from my Images folder to use as a background.

body 
{
    background-color: #FFFEF0;
    background-image: url(./Images/Logo 1.png);
}

However, this does not seem to work, I see no image. I have also tried ../Images/Logo 1.png, but again this doesn't work either. From my index.html I can get an image to display from the Images folder by using ./Images/Logo 1.png (note ../ vs ./)

Am I going about this the right way or not? I did some digging on Google about referencing relative paths but there werent any great examples up.

Can anyone please tell me where I am going wrong with this?

just a comment - `./` references to the same folder, `../` references to the parent folder — Sindhara, Jun 13 '12 at 10:34
Haha yeah the picture was taken OLD SKOOL. Tried print screen but wouldnt work with my editor for some reason — heyred, Jun 13 '12 at 10:39

score 5 · Accepted Answer · answered Jun 13 '12 at 10:31

5

If your URL includes spaces, you should really enclose the reference in quotes, also replace the space character with %20:

background-image: url('../Images/Logo%201.png');

answered Jun 13 '12 at 10:31

BenM

52,573
26
113
168

1

URLs can't include spaces, they should be replaced with `%20` – Quentin Jun 13 '12 at 10:32
%20 not always necessary. If you put the Url inside single or double quotes, spaces are automatically URLencoded in %20 – Andrea_86 Jul 31 '19 at 13:42

score 1 · Answer 2 · answered Jun 13 '12 at 10:33

Add 2 dots, to go up one level in folders, so if you have your images in one folder and then your css in another you'd need to go up one level and then in to your images folder eg:

background-image: url(../Images/Logo 1.png);

You might also get issues with using a space in the file name, try using an underscore instead :-)

score 1 · Answer 3 · answered Jun 13 '12 at 10:33

If you use image in css, you need put source file related to css file, so if your structure is like:

index.html
css
  style.css
images
  background.jpg

your css should be like:

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

Also dont use spaces in file name.

score 1 · Answer 4 · answered Jun 13 '12 at 10:33

use the .. to go up one level in the directory
quote the url (optional, however advisable for best crossbrowser support)
don't use spaces, try underscores instead
good practice for simplifying things: folders and files lowercase, that way you don't have to remember if the case

background-image: url("../images/logo_1.png");

score 0 · Answer 5 · answered Jun 13 '12 at 10:39

Two issues, first the stuff with the url should be in quotes like this

background-image: url("../Image/Logo 1.png");

Second a single dot referrers to the current directory that the css file is located in, so when you used "./Image/Logo 1.png" it tried to find a folder called image within the CSS folder. You need to use double dots ("..") in order to go up a level within the file directory. That should fix it, assuming that your html correctly includes the css file.

quotes are not necessarily needed: http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage — Luca, Jun 13 '12 at 10:50

Folder structure in CSS

5 Answers5