Question

I’m using some CSS framework and trying to show icon (using class selector with background-image property). Lets say, my file structure is:

Content / site.css
Content / Folder1  / framework.css
Content / Folder1  / Folder2       / framework-images.css
Content / Folder1  / Folder2       / framework-icon1.png

site.css looks like:

@include "Folder1/framework.css";
...

framework.css like:

@include "Folder2/framework-images.css";
...

framework-images.css is:

.selector {
    background-image: url("icon1.png");
}

But when I’m trying to add to my html-element class “selector” Firefox dev tools shows me that it trying to load icon from here:

http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png

while correct path is (am I right?):

~/Content/Folder1/Folder2/icon.png

or just

http://localhost:1234/Content/Folder1/Folder2/icon.png

So where can be mistake? How to tell client to use correct path?

P.S. If it matters I’m using dotless (Less css). Other words, all .css is actually .less.

P.P.S. This is ASP.NET MVC4 app.

Update:
As @djfarrelly pointed out, the problem was in incorrect path in background-image: url(…). I’ve changed it to:

background-image: url("/Content/Folder1/Folder2/Icon1.png");

and it started working.
But I’m still confused. Can anyone explain why it doesn’t working without full path specifying?

Answer 1

All of your references to images should be in reference to the root folder in your website to avoid confusion. Have you tried to change your css to reference from the root:

.selector {
    background-image: url("/Content/Folder1/Folder2/icon1.png");
}

If you include the / that should clean it up.

EDIT:
I originally posted this w/ ../ instead of the correct / to reference the root folder.