CSS Image Path Not Working

Question

After extensive research, I have tried

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

And the entire URL. Plus others. I don't know what I'm doing wrong.

The path is forward one directory.

This is my CSS:

nav {
    background-image: url ("./images/navmenu.jpg");
    width:100%;
    height:200px;
    margin:0;
    display:block;
    padding:0;

}

If `"/images/image.jpg"` doesn't work, that means that the picture is not at `"/images/image.jpg"`. — Álvaro González, Dec 30 '14 at 17:42
Where (relative to your web root directory) is your CSS file? Where (again, relative to your web root directory) is the "images" directory. If you are not using a CSS file and just inserting the style into the document (aka embedded stylesheet), don't. It's a bad idea. Move the styles to a .css file instead, link to it in your pages. That will maintain more consistency. — Joseph Marikle, Dec 30 '14 at 17:46
possible duplicate of [What does "./" (dot slash) refer to in terms of an HTML file path location?](http://stackoverflow.com/questions/7591240/what-does-dot-slash-refer-to-in-terms-of-an-html-file-path-location) — The Pragmatick, Dec 30 '14 at 17:58

score 1 · Answer 1 · answered Dec 30 '14 at 17:43

1

Remove the space after url and also remove ./ before images in the path:

background-image: url("images/navmenu.jpg");

answered Dec 30 '14 at 17:43

Rahul Desai

15,242
19
83
138

Awesome. Combining this answer with the two dots, it worked for me. Thank you!! – SereneTheif Dec 30 '14 at 17:47

score 1 · Answer 2 · answered Dec 30 '14 at 17:44

1

nav {
background-image: url ("../images/navmenu.jpg");
width:100%;
height:200px;
margin:0;
display:block;
padding:0;

}

use double dots before /images this will work for you.

answered Dec 30 '14 at 17:44

Puneet Bharti

126
1
7

When I combined this answer with the one above, it worked. Thank you very much!!! – SereneTheif Dec 30 '14 at 17:47

score 0 · Answer 3 · answered Dec 30 '14 at 17:45

0

Try opening the page up in chrome, then inspect the nav element then look at the css that your chrome is trying to access (mouse over the url portion in the css styles tab. It should help you identify your issue.

enter image description here

answered Dec 30 '14 at 17:45

jbg

476
2
9

score 0 · Answer 4 · answered Dec 30 '14 at 17:50

Please check whether folder name is images or Images. Accordingly use the style -

background-image: url("images/navmenu.jpg");

or

background-image: url("Images/navmenu.jpg");

if it is happening in your website please share the url so that we can find the exact problem. Thanks

CSS Image Path Not Working

4 Answers4