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.

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

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

Answer 3

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

Try:

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

Answer 4

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

Answer 5

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.

Answer 6

Use the below.

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

This shall work.