How to give the background-image path in CSS?

Question

My CSS file is in :

Project/Web/Support/Styles/file.css

My image is in :

Project/Web/images/image.png

I want this image in my CSS file.

I have tried :

1) background-image: url(/images/image.png);
2) background-image: url('/images/image.png');
3) background-image: url("/images/image.png");
4) background-image: url(../images/image.png);
5) background-image: url('../images/image.png');
6) background-image: url("../images/image.png");

But. i'm not getting this image in my page.

What is the correct way to specify the path of image file in the css file ?

This might help...(http://stackoverflow.com/questions/4862231/links-not-going-back-a-directory) — zik, Nov 18 '13 at 12:07
You should try avoid using Relative paths if possible and instead use an Absolute path. — AfromanJ, Nov 18 '13 at 12:10
Using absolute path has some limitations. That's why i went for relative path. — Jobin, Nov 19 '13 at 08:42
Relative background image URLs are relative to the path of the css file they are declared in, not to the HTML file as other resources are. Check http://www.w3.org/TR/CSS2/syndata.html#uri — Juan Lanus, Aug 22 '15 at 23:41

score 195 · Accepted Answer · edited Nov 01 '22 at 16:06

195

Your css is here: Project/Web/Support/Styles/file.css

1 time ../ means Project/Web/Support and 2 times ../ i.e. ../../ means Project/Web

Try:

background-image: url('../../images/image.png');

edited Nov 01 '22 at 16:06

Tamir Abutbul

7,301
7
25
53

answered Nov 18 '13 at 12:07

codingrose

15,563
11
39
58

2

Yes, correct. Similarly, if you give `././`, you would get the same solution. - @Hiral – Nitesh Nov 18 '13 at 12:36
2

so the path is relative to current CSS and not the HTML in which the CSS is included right? – KNU Nov 03 '14 at 14:15
**Question:** **../** means go back go back? that's why we are at Project/Web/Support but won't **../../** means only we are at Project. Then the code shouldn't be **background-image: url('../../Web/images/image.png');**? I'm unable to understand please explain. @Hiral – Harshal Sharma Sep 29 '19 at 07:53
@HarshalSharma we have to reach at /Project/Web. 1 time ../ -> /Project/Web?Support and 2 times ../ i.e. ../../ will take us to /Project/Web. I hope it is clear now. – codingrose Oct 02 '19 at 05:10
1

@Hiral ok, we are not counting file.css. ../ => Project/Web/Support and ../../ means /Project/Web. So, one ../ will take you one directory back. is that it? – Harshal Sharma Oct 03 '19 at 08:56
@HarshalSharma yes exactly! – codingrose Oct 10 '19 at 06:54

score 16 · Answer 2 · answered Nov 18 '13 at 12:09

There are two basic ways:

url(../../images/image.png)

or

url(/Web/images/image.png)

I prefer the latter, as it's easier to work with and works from all locations in the site (so useful for inline image paths too).

Mind you, I wouldn't do so much deep nesting of folders. It seems unnecessary and makes life a bit difficult, as you've found.

score 6 · Answer 3 · answered Nov 18 '13 at 12:07

6

Use the below.

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

This shall work.

answered Nov 18 '13 at 12:07

Nitesh

15,425
4
48
60

12

`.` refers to the current folder, `..` refers to the parent directory and that one should be used. – Adrian Ber Nov 18 '13 at 12:11
The level holds that you are targetting it by `././` to reach to the parent folder. Try it yourself. - @AdrianBer – Nitesh Nov 18 '13 at 12:22

score 4 · Answer 4 · edited Nov 18 '13 at 12:25

4

You need to get 2 folders back from your css file.

Try:

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

edited Nov 18 '13 at 12:25

Nitesh

15,425
4
48
60

answered Nov 18 '13 at 12:08

UnderTheSea

66
2

score 2 · Answer 5 · answered Dec 13 '19 at 07:41

2

you can also add inline css for adding image as a background as per below example

<div class="item active" style="background-image: url(../../foo.png);">

answered Dec 13 '19 at 07:41

Yogesh

715
1
7
20

score 0 · Answer 6 · edited Nov 01 '22 at 16:10

0

The solution (http://expressjs.com/en/starter/static-files.html).

once done this the image folder no longer shalt put it. only be

background-image: url ( "/ image.png");

carpera that the image is already in the static files

edited Nov 01 '22 at 16:10

Tamir Abutbul

7,301
7
25
53

answered Jul 17 '16 at 03:41

lypef

71
1
2

How to give the background-image path in CSS?

6 Answers6

Linked

Related