Folder structure in CSS

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?

Answers


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

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 :-)


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.


  1. use the .. to go up one level in the directory
  2. quote the url (optional, however advisable for best crossbrowser support)
  3. don't use spaces, try underscores instead
  4. 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");


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.


Need Your Help

Use Views instead of a node template for some node types

drupal drupal-views

I would like to replace the default display of some custom node types using views in Drupal 7.

Retrieve JSON Object from REST Blogger Api Request with PHP

php rest blogger

I'm still wondering how to get json object from REST Api request from this link https://developers.google.com/blogger/docs/3.0/using.