How to Specify Image Paths in CSS Files

How to give the background-image path in CSS?

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

Solution to relative path to image in CSS file depending on what file that includes it

The only way is with absolute paths. This means that in your CSS you must define an absolute path for your images, for example:

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

What's the problem? You need to know the absolute path where your folders are. For example, if you have this URL: http://localhost/myFolder/images/image.png, your CSS will be:

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

But when you upload it to a production server like this: http://myserver.com/images/image.png, your CSS must to change to something like this:

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

So the best way is to develop in the same environment that your production server. This will be with the URL http://localhost/images/image.png (develop) and http://myserver.com/images/image.png (production).

Another way is to making friendly URLs, that avoids to you to make custom folders, and you can have all in one folder and the URLs will be rewrited by the server.

Good luck.

CSS background image URL path

Remove the leading forward-slash from the image URL, as follows:

#login-bg {
    background-image:url('images/login/login_background.jpg');
    font-size: 20px;
}

By using the leading forward-slash, browser tries to load the image from the web root directory of the domain (e.g /var/www/) instead of the current (CSS) file location.

File path for css background images

It also depends how your website is structured. Assuming that your project looks like this, the paths of your images should be relative to the folder:

website
   webtest
     images
       plane.png
      css
       style.css

Your paths in style.css should look like:

.class {
    background: url('../images/plane.png') 0 0 no-repeat;
}

How to specify image paths in CSS files?

The paths to images in CSS files are always relative to the CSS file, not to the page referencing the CSS file.

So it shouldn't matter that you are using the CSS file in HTML pages at different path depths, as it always looks from the location of the CSS.

For example, if your CSS file is in /Content/Css and your images are in /Content/Images then you should always reference your images as url(../Images/something.png).

How can find the image path for css

Please check here:

https://stackoverflow.com/a/20047417/6284581

you do not have to move your .html file

Your example css and img path not state correctly.

../ means one file directory up(check link above)! In your example if you start from
web... then you need to go main project directory. Try this

<link href="../web/static/styles/style.css" rel="stylesheet">

<a class="navbar-brand" href="#"><img src="../web/static/style/img/logo.png"></a>

I hope it will help to you