3

I am studying HTML and CSS right now. And I got issue about relative paths of CSS background-image. My background-image code under CSS doesn't show image when I use relative path.

I am using ATOM code editor. here is the CSS linked code in my HTML file.

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

I try several relative paths, all doesn't work

  1. background-image: url('resources\building.png');
  2. background-image: url('\resources\building.png');
  3. background-image: url('boardway\resources\building.png');
  4. background-image: url('\boardway\resources\building.png');
  5. background-image: url('C:\Users\michael\gitprojects\boardway\resources\building.png');

boardway is parent directory of resources. C:\Users\..\.. is absolute path of image. All five address don't work.

But When I use AWS address which is 

background-image: url('https://s3.amazonaws.com/codecademy-content/programs/freelance-one/broadway/images/the-flatiron-building.png');

The background picture are showing correctly. So at least I can sure my code is correct. But I failed to input a correct relative path. What I can do?

Blasanka
  • 21,001
  • 12
  • 102
  • 104
CHNimitz
  • 71
  • 2
  • 3
  • 1
    1)where is path html? 2)where is path css? – Ehsan May 27 '17 at 02:59
  • Relative paths in CSS are relative to your CSS-file, and if you want to go upwards in your hierarchy you use dots. so if your image is in `C:\Users\michael\gitprojects\boardway\resources\building.png` and your css is in `C:\Users\michael\gitprojects\boardway\css\styles.css` then your relative path would be `../resources/building.png` – ippi May 27 '17 at 03:10
  • Possible Duplicate. https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css – Adharsh M May 27 '17 at 03:15
  • The 5th one is not a relative path, it's an absolute path. And browsers generally don't allow you to load absolute local paths (security issues), at least not without making you hop through hoops first. – ippi May 27 '17 at 03:22

3 Answers3

5

you should put / all url's

url('resources/building.png');

Please read about URLs

alessandrio
  • 4,282
  • 2
  • 29
  • 40
  • Thank you for the link you posted. I finally found what the issue is. I think the css file didn't know where is the basic/Absolute URL is. That why relative path didn't work. I change my image location to C:\Users\michael\gitprojects\boardway\resources\css\images. The the relative path 'images/building.png' worked smoothly – CHNimitz May 29 '17 at 01:31
5

There are 2 ways for defining path for a file/image/js/css etc.

  1. Using Absolute Path

2 .Using Relative Path

Below are few examples

Relative Paths

index.html
/graphics/image.png
/help/articles/how-do-i-set-up-a-webpage.html

Absolute Paths

http://www.example.com
http://www.example.com/graphics/image.png
http://www.example.com/help/articles/how-do-i-set-up-a-webpage.html

[Read More][1]

Issue with your paths 1. Use forward slash instead of a backward slash. 2. Never link file for local systems (Path on the server might differ).

Try to make changes accordingly as per above.

Background-images:URL(../resources/building.png);
Rohit Kumar
  • 776
  • 3
  • 21
  • 1
    Your answer is useless if you don't explain it or at least explain the assumptions you are making. – ippi May 27 '17 at 03:07
  • Thank you for your help. I finally found what the issue is. I think the css file didn't know where is the basic/Absolute URL is. That why relative path didn't work. I change my image location to C:\Users\michael\gitprojects\boardway\resources\css\images. Then the the relative path 'images/building.png' worked smoothly – CHNimitz May 29 '17 at 02:17
-1

Relative Path worked for me:

    background-image:url('../images/filename.png');
razzi383
  • 1
  • 1
  • "Brevity is acceptable, but fuller explanations are better" . You can read this in help center, [how to answer](https://stackoverflow.com/help/how-to-answer). Please read it, and try to add some supporting information – pierpy May 26 '23 at 07:59