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
– Álvaro González, Commented Dec 30, 2014 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
– Joseph Marikle, Commented Dec 30, 2014 at 17:46
possible duplicate of What does "./" (dot slash) refer to in terms of an HTML file path location? — The Pragmatick
– The Pragmatick, Commented Dec 30, 2014 at 17:58

Rahul Desai · Accepted Answer · 2014-12-30 17:43:37Z

1

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

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

answered Dec 30, 2014 at 17:43

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SereneTheif Over a year ago

Awesome. Combining this answer with the two dots, it worked for me. Thank you!!

Puneet Bharti · Accepted Answer · 2014-12-30 17:44:41Z

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.

When I combined this answer with the one above, it worked. Thank you very much!!!

jbg · Accepted Answer · 2014-12-30 17:45:59Z

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

yogihosting · Accepted Answer · 2014-12-30 17:50:49Z

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

Collectives™ on Stack Overflow

CSS Image Path Not Working

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Related