CSS background-image path

Question

I have a hard time adding picture through background-image property in css my file structure looks like this:

www
   styles
      stylesheet.css
   images
      background.jpg

I tried:

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

I also tried all of these options without quotes. I copy-pasted image's name and my folders are as I stated: main folder in which I have styles folder(inside is stylesheet.css) and images folder (inside is background.jpg). The image did not load in chrome or firefox. What path declaration should I use to make the image show?

../images/background.jpg looks right; maybe the image isn’t showing up for a different reason. Could you show the full CSS rule and the HTML for the element you’re trying to apply it to? — Ry-
– Ry- ♦, Commented Dec 4, 2015 at 23:55
When you inspect element (Chrome of FireFox), there should be an error for the image. Check that and see what path the page is actually getting. Once you know what the page is actually getting, it should be fairly simple to pinpoint what is going wrong. — kjw
– kjw, Commented Dec 4, 2015 at 23:56
Did the style sheet load at all? Do you see other styles from the same sheet? — ThisClark
– ThisClark, Commented Dec 4, 2015 at 23:59

ThisClark · Accepted Answer · 2015-12-05 00:07:50Z

3

www
   index.html
   styles
      stylesheet.css
   images
      background.jpg

that the directory, here inside index.html / index.php (where u want show)

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

remember for href link and then at stylesheet.css

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

edited Dec 5, 2015 at 0:07

ThisClark

14.9k11 gold badges73 silver badges103 bronze badges

answered Dec 5, 2015 at 0:02

Hafidh

1307 bronze badges

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

Comments

Martyrboy · Accepted Answer · 2015-12-04 23:58:00Z

1

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

This is correct. If it is not working, perhaps the path name is not the problem.

Are you running this from a server?
Or, are you running this from your computer?

Try changing the situation and see if anything changes.

I'd put my money on spelling mistake, though. Best to triple check it.

answered Dec 4, 2015 at 23:58

Martyrboy

133 bronze badges

1 Comment

CoderJ Over a year ago

I triple checked every single letter one by one I am running this from localhost on wamp tried your suggested line of code, no success

Collectives™ on Stack Overflow

CSS background-image path

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related