External CSS images won't load

Question

Good day.

My structure is like this:

/
  index.html
  style/
    main.css
  images/
  test/
    test.html

/style/main.css says something like this:

body {
    background-image: url('/images/SomeImage.png');
    background-color: #000;
}

/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.

Also, if I write the same style internally into /index.html the background will load.

Also, I created /test/test.html which says nothing but

<img src="/images/SomeImage.png" />

and the image is displayed on that page.

So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.

Adding **../** is not the case here. As mentioned, _/test/test.html_ doesn't use it and still works. Also i have my local server setup so **/** stands for the root. — Ivan Chepurin, Apr 09 '15 at 10:35
I noticed it wasn't reacting to any changes I've made to the **/style/main.css** file, so I saved the very same CSS with a different name **/style/test.css**, changed the link to it in **/index.html** and BAM! It works. Two similar files in the same **/style/** directory. One works as expected, the other one doesn't. What is it, a broken file? — Ivan Chepurin, Apr 09 '15 at 11:07
I had an issue long ago where any edits I made to files in Notepad contained an extra character at the top of the file after using ftp to transfer the file to the server. The file would then not be served correctly. I remember that when I edited and saved the same file using WordPad instead of Notepad, the problem disappeared. Had something to do with character encoding, I guess. — Stefan, Apr 09 '15 at 11:13

Dave Burns · Answer 1 · 2015-04-09T11:05:12.590

3

add ../ to the beginning of /images so it read ../images/imagename.jpg

Here's what your code should be:

body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}

edited Apr 09 '15 at 11:05

answered Apr 09 '15 at 10:30

Dave Burns

327
1
2
14

No, his css is in a css folder, his code is looking for an images folder in the css folder, it needs to backtrack to the parent "../" and then look for the images folder. – Dave Burns Apr 09 '15 at 11:08
When you use / at the start of the url, it means 'root-relative'. Therefore you don't need to change it to folder-relative. – Stefan Apr 09 '15 at 11:09
So what's your answer then? – Dave Burns Apr 09 '15 at 11:11
I don't know why he is having this problem. But I do know that using root-relative urls shouldn't be the problem. The OP has also said this isn't the problem, many times in this thread already. – Stefan Apr 09 '15 at 11:15

Rokin · Answer 2 · 2015-04-09T10:33:11.320

1

Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:

background-image: url('../images/SomeImage.png');

edited Apr 09 '15 at 10:33

answered Apr 09 '15 at 10:30

Rokin

1,977
2
20
32

I don't think this is necessary. You should be able to create root-relative urls by starting with /. – Stefan Apr 09 '15 at 10:40
How does the style sheet know where the root is then? – Rokin Apr 09 '15 at 10:42
Because the root is at the root! – Stefan Apr 09 '15 at 10:43

score 1 · Answer 3 · answered Apr 09 '15 at 10:57

1

Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?

answered Apr 09 '15 at 10:57

JanT

2,105
3
28
35

score 0 · Answer 4 · answered Apr 09 '15 at 10:33

0

Initially, it looks like your code is fine.

So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.

answered Apr 09 '15 at 10:33

Dan Blows

20,846
10
65
96

So I checked my developer tools, and I noticed that it was trying to load images from wrong directories, like _/style/images/SomeImage.png_ instead of _/images/SomeImage.png/_. And it was a very unexpected thing for me, cause I already tried **../** and it didn't work. So then I noticed it wasn't reacting to any changes I've made to the **main.css** file, so I saved the very same CSS file with a different name **test.css**, changed the link in **index.html** and BAM! It works. Two similar files in the same directory. One works as expected, the other doesn't. Any idea? – Ivan Chepurin Apr 09 '15 at 11:00
@IvanChepurin Probably a caching problem. Disable your browser's cache, and see if that works. – Dan Blows Apr 09 '15 at 12:11

score 0 · Answer 5 · answered Apr 09 '15 at 11:00

if you are in /styles/style.css you need to add:

../ 2 levels back to get to the root folder.

So as Rokin answered :

background-image: url('../images/SomeImage.png');

is the way to do it.

To link your CSS within your index file use the following:

<link href="./style/style.css" rel='stylesheet' type='text/css'>

./ 1 level back within the index.html to reach the root folder.

In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.

If you are working locally on a mac:

- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**

If you are working directly on a live server:

- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image 
- Right click and select file permissions
- set permissions to : **664**

No, the permissions are OK. **../** doesn't work and is not the case here. — Ivan Chepurin, Apr 09 '15 at 11:08
can u upload the whole files to any web server and share the link so we can check — Maroun Melhem, Apr 09 '15 at 15:42

score 0 · Answer 6 · answered Apr 09 '15 at 11:42

0

Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.

answered Apr 09 '15 at 11:42

Ivan Chepurin

131
1
2
10

score 0 · Answer 7 · edited Jun 05 '21 at 08:59

0

Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.

edited Jun 05 '21 at 08:59

Giorgos Tsakonas

5,845
3
17
20

answered Jun 05 '21 at 04:45

semah jdidi

1

It depends on the related path you write. – Epic Chen Jun 05 '21 at 05:24

score -1 · Answer 8 · edited Jul 18 '18 at 18:41

-1

I am having the same problem. Working with Visual Studio Community.

I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...

so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.

edited Jul 18 '18 at 18:41

Patrick

1,717
7
21
28

answered Jul 18 '18 at 17:27

Divan Gerber

11
3

Oh and..so currently the file directory is as follows " D:\Coding Tutorials\Learning To Use CSS\FlyInText\css\images " so its a big folder... Inside my Index.html file the stylesheet is linked as an external stylesheet.. () Its not necessary to ./ , ../ , ../ because the stylesheet is already linked to Index.html therefore having the images inside the same folder as your stylesheet "css folder" it will automatically search that entire folder for the image.. – Divan Gerber Jul 18 '18 at 17:35
.html > () .css > (.browse { background-image: url('/hello.png'); width:200px; height:100px; color:white; } ) Image directory > (D:\Coding Tutorials\Learning To Use CSS\FlyInText\css\images) – Divan Gerber Jul 18 '18 at 17:35

External CSS images won't load

8 Answers8

Linked