can't find correct relative paths of CSS background-image

Question

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?

Answer 1

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);

Answer 2

you should put / all url's

url('resources/building.png');

Please read about URLs