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?

Answer 1

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');