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 ?

Answer 1

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

Answer 2

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.