Geek Answers Handbook

CSS folder structure

Someone can help.

I am updating my knowledge of HTML and CSS (4 years have passed since I worked with these languages), and I had problems with the link to the images in the folder structure that I have. The attached image shows the folder structure that I have for my project. enter image description here

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

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

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

Am I right about this or not? I searched Google several times for a link to relative paths, but there were no great examples.

Can anyone tell me where I am going wrong?

+4
source share
5 answers

If your URL contains spaces, you should really quote the link and replace the space character with %20 :

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

Add 2 points to go up one level in the folders, so if you have images in one folder and then your css in another, you need to go up one level and then in the image folder, for example:

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

You may also get problems using a space in the file name, try emphasizing instead :-)

+1
source

If you use the image in css, you need to put the source file associated with the css file, so if your structure is similar:

 index.html css style.css images background.jpg

your css should look like this:

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

Also do not use spaces in the file name.

+1
source
  • use .. to go one level in the directory
  • provide a url (optional, but recommended for better crossbrowser support)
  • do not use spaces, try to emphasize instead

  • Good practice to simplify things: folders and files are lowercase, so you don't need to remember if the case

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

+1
source

Two problems, first the material with the URL should be in quotation marks like this

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

Secondly, one point refers to the current directory where the css file is located, so when you used "./Image/Logo 1.png", he tried to find a folder called image in the CSS folder. You need to use double dots ("..") to go up a level in the file directory. This should fix this, assuming your html includes the css file correctly.

0
source

More articles:


All Articles