StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POImage path in CSS
text
Body
copied!<p>I'm using some CSS framework and trying to show icon (using class selector with <em>background-image</em> property). Lets say, my file structure is:</p> <pre><code>Content / site.css Content / Folder1 / framework.css Content / Folder1 / Folder2 / framework-images.css Content / Folder1 / Folder2 / framework-icon1.png </code></pre> <p><strong>site.css</strong> looks like:</p> <pre><code>@include "Folder1/framework.css"; ... </code></pre> <p><strong>framework.css</strong> like:</p> <pre><code>@include "Folder2/framework-images.css"; ... </code></pre> <p><strong>framework-images.css</strong> is:</p> <pre><code>.selector { background-image: url("icon1.png"); } </code></pre> <p>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:</p> <pre><code>http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png </code></pre> <p>while correct path is (<strong>am I right?</strong>):</p> <pre><code>~/Content/Folder1/Folder2/icon.png </code></pre> <p>or just</p> <pre><code>http://localhost:1234/Content/Folder1/Folder2/icon.png </code></pre> <p>So where can be mistake? How to tell client to use correct path?</p> <p>P.S. If it matters I'm using dotless (Less css). Other words, all <strong>.css</strong> is actually <strong>.less</strong>.</p> <p>P.P.S. This is ASP.NET MVC4 app.</p> <p><strong>Update:</strong> As @djfarrelly pointed out, the problem was in incorrect path in <em>background-image: url(...)</em>. I've changed it to:</p> <pre><code>background-image: url("/Content/Folder1/Folder2/Icon1.png"); </code></pre> <p>and it started working. But I'm still confused. Can anyone explain why it doesn't working without full path specifying?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload