<p>Your image/CSS/JS URLs should be either absolute, protocol-relative, or root-relative:</p>



<pre class="lang-html prettyprint-override"><code>&lt;!-- absolute --&gt;
&lt;link rel="stylesheet" href="http://example.com/assets/css/nav.css"&gt;
&lt;img src="http://example.com/assets/images/swf_logo.png" alt="" /&gt;

&lt;!-- protocol-relative --&gt;
&lt;link rel="stylesheet" href="//example.com/assets/css/nav.css"&gt;
&lt;img src="//example.com/assets/images/swf_logo.png" alt="" /&gt;

&lt;!-- root-relative --&gt;
&lt;link rel="stylesheet" href="/assets/css/nav.css"&gt;
&lt;img src="/assets/images/swf_logo.png" alt="" /&gt;
</code></pre>

<p>Relative URLs (which start with either <code>./</code>, <code>../</code>, or no slash at all) are generally a bad idea, since the URL will need to vary depending on the number of segments in your URI.</p>

<p>For example if you were to access <a href="http://example.com/" rel="nofollow">http://example.com/</a>, the relative path to your nav.css would be <code>assets/css/nav.css</code>, but if you were to access <a href="http://example.com/about/" rel="nofollow">http://example.com/about/</a> (with a trailing slash), then the proper relative URL would be <code>../assets/css/nav.css</code>.</p>

<p>That’s not to say that relative URLs are impossible. The main issue with your URLs is not that they’re relative, it’s that you’re treating them as relative from the <em>physical template file location</em>. Keep in mind that these front-end resource URLs are resolved by the <em>browser</em>, not by the server, and browsers have no idea how the resulting HTML gets generated, let alone that it came from a template that happened to live a couple directories up from your web root, and in a craft/templates/... subfolder. So they need to be relative based an the <em>apparent</em> location of the webpage, as defined by its URI (e.g. “/news/some-slug”).</p>

CC BY-SA 3.0
2014-10-22T20:24:50.710Z
The difference between Brandon's answer and mine is that I'm just telling you how to get the job done. He on the other hand is trying to educate you. I give you examples of both absolute (via Craft Tags & Vars) as well as root-relative paths though, I didn't explain the why; just the how. Point being is that you should consider reading Brandon's answer before you read mine :-)
Natetronn
CC BY-SA 3.0
2014-10-22T20:27:44.340Z
Thanks so much guys! I knew I was letting the paths get away from me somehow. Brandon did clear this up by his education. Again, thanks!
James Ledford
CC BY-SA 3.0
2014-10-22T20:11:42.233Z
2014-10-22T20:19:48.910Z
2014-10-22T20:19:48.910Z
Brandon Kelly
<p>I would suggest using the <a href="http://buildwithcraft.com/docs/templating/includecssfile" rel="nofollow">includeCssFile Tag</a> for your CSS files (there is another for <a href="http://buildwithcraft.com/docs/templating/includejsfile" rel="nofollow">js files</a> for what ever it's worth)</p>

<p>So for example in your case you'd have:</p>

<p><code>{% includeCssFile "/assets/css/nav.css" %}</code></p>

<p>Note: I think that is correct though you might need to play with the path a bit. Specifically the first slash.</p>

<p>For the img tags you can probably get way with this:</p>

<p><code>&lt;img src="/assets/images/swf_logo.png" alt="" /&gt;</code></p>

<p>or if you want you could add the <a href="http://buildwithcraft.com/docs/templating/global-variables#siteUrl" rel="nofollow">siteUrl Global Variable</a> to the mix as well</p>

<p><code>&lt;img src="{{ siteUrl }}assets/images/swf_logo.png" alt="" /&gt;</code></p>

<p>Note: again you might need to play with the starting slash depending on your config setup and siteUrl ending with a slash or not:</p>

<p><code>{{ siteUrl }}/assets/images/swf_logo.png</code></p>

CC BY-SA 3.0
2014-10-22T20:11:37.530Z
2014-10-22T20:29:05.030Z
2014-10-22T20:29:05.030Z
Natetronn
<p>I feel this a simple problem to fix, but I can't find an answer anywhere.</p>

<p>I am developing locally on using MAMP.</p>

<p>Everything on my site is working great until I call up page using a template inside a folder inside the templates directory. At that point the paths are broken to any and all assets (CSS, images, etc.)</p>

<p>For example, if I set the Entry Template for a section in Craft to say news/_entry and then view a news article page... I get an un-styled page.</p>

<p>I am including the CSS like this:</p>



<pre class="lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="../public/assets/css/nav.css"&gt;
</code></pre>

<p>and the images like:</p>

<pre class="lang-html prettyprint-override"><code>&lt;img src="../public/assets/images/swf_logo.png" alt="" /&gt;
</code></pre>

CC BY-SA 3.0
2014-10-22T19:54:26.357Z
Can you share how you are including your css as well as how you are setting the src in your img tags?
Natetronn
CC BY-SA 3.0
2014-10-22T19:56:26.750Z
Could you post the code for your layout template and the _entry template?
Alec Ritson
CC BY-SA 3.0
2014-10-22T19:59:45.337Z
Yes Natetronn...

in my _layouts.html I am including the CSS like
<link rel="stylesheet" href="../public/assets/css/nav.css">

and the images like
<img src="../public/assets/images/swf_logo.png" alt="" />
James Ledford
CC BY-SA 3.0
2014-10-22T20:04:25.330Z
@alec-ritson here is my _entry template code...

{% extends "_layout" %}

{% block content %}
 <article class="newsarticles">
  <h2>{{ entry.title }}</h2>
  <p class="newsdate">Posted on {{ entry.postDate.format('F d, Y') }}</p>
  {{ entry.body }}
 </article>
{% endblock %}
James Ledford
CC BY-SA 3.0
2014-10-22T20:10:18.480Z
@JamesLedford Can you edit your original question with the template code?  Difficult to read code in comments.
Brad Bell
CC BY-SA 3.0
2015-09-12T15:56:13.937Z
I have a similar problem. I installed craft in sub folder of live site for testing.
It is xzy.com/munkak/craft-/
I can put in my _layout.html
<link rel="stylesheet" href="/munkak/craft-/css/html5reset.css" media="all">
that is working fine.
But targeting the images directory does not work the same way from calling from a css file like so: background: url("/munkak/craft-/assets/images/logo.jpg") no-repeat scroll 0% 0% transparent;
this css is in /munkak/craft-/craft/templates/css An absolute src from xzy.com/munkak/craft-/assets/images/logo.jpg works.
I am stuck with this.
Any help would be gre
Csaba Dobo
CC BY-SA 3.0
2015-09-12T17:07:35.167Z
@CsabaDobo: I'd recommend [asking a new question](http://craftcms.stackexchange.com/questions/ask), since this thread is already long and complicated. Feel free to reference back to this thread, so people know you're dealing with a similar problem.
Lindsey D
<templating>
Path and Entry Template problems when developing locally
# Path and Entry Template problems when developing locally

(Asked by: username_0 on 2014-10-22)

I feel this a simple problem to fix, but I can't find an answer anywhere.
I am developing locally on using MAMP.
Everything on my site is working great until I call up page using a template inside a folder inside the templates directory. At that point the paths are broken to any and all assets (CSS, images, etc.)
For example, if I set the Entry Template for a section in Craft to say news/_entry and then view a news article page... I get an un-styled page.
I am including the CSS like this:


and the images like:

**Tags:** templating

> **Comments:**
> **username_1**: Can you share how you are including your css as well as how you are setting the src in your img tags?  
> **username_2**: Could you post the code for your layout template and the _entry template?  
> **username_0**: Yes username_1...  in my _layouts.html I am including the CSS like <link rel="stylesheet" href="../public/assets/css/nav.css">  and the images like <img src="../public/assets/images/swf_logo.png" alt="" />  
> **username_0**: @alec-ritson here is my _entry template code...  {% extends "_layout" %}  {% block content %}  <article class="newsarticles">   <h2>{{ entry.title }}</h2>   <p class="newsdate">Posted on {{ entry.postDate.format('F d, Y') }}</p>   {{ entry.body }}  </article> {% endblock %}  
> **username_3**: @JamesLedford Can you edit your original question with the template code?  Difficult to read code in comments.  
> **username_4**: I have a similar problem. I installed craft in sub folder of live site for testing. It is xzy.com/munkak/craft-/ I can put in my _layout.html <link rel="stylesheet" href="/munkak/craft-/css/html5reset.css" media="all"> that is working fine. But targeting the images directory does not work the same way from calling from a css file like so: background: url("/munkak/craft-/assets/images/logo.jpg") no-repeat scroll 0% 0% transparent; this css is in /munkak/craft-/craft/templates/css An absolute src from xzy.com/munkak/craft-/assets/images/logo.jpg works. I am stuck with this. Any help would be gre  
> **username_5**: @CsabaDobo: I'd recommend [asking a new question](http://craftcms.stackexchange.com/questions/ask), since this thread is already long and complicated. Feel free to reference back to this thread, so people know you're dealing with a similar problem.  

---

## 2 answers

### Answer by username_6 on 2014-10-22. Score: 5 | Accepted answer

Your image/CSS/JS URLs should be either absolute, protocol-relative, or root-relative:












Relative URLs (which start with either ./, ../, or no slash at all) are generally a bad idea, since the URL will need to vary depending on the number of segments in your URI.
For example if you were to access http://example.com/, the relative path to your nav.css would be assets/css/nav.css, but if you were to access http://example.com/about/ (with a trailing slash), then the proper relative URL would be ../assets/css/nav.css.
That’s not to say that relative URLs are impossible. The main issue with your URLs is not that they’re relative, it’s that you’re treating them as relative from the physical template file location. Keep in mind that these front-end resource URLs are resolved by the browser, not by the server, and browsers have no idea how the resulting HTML gets generated, let alone that it came from a template that happened to live a couple directories up from your web root, and in a craft/templates/... subfolder. So they need to be relative based an the apparent location of the webpage, as defined by its URI (e.g. “/news/some-slug”).

> **Comments:**
> **username_1**: The difference between Brandon's answer and mine is that I'm just telling you how to get the job done. He on the other hand is trying to educate you. I give you examples of both absolute (via Craft Tags & Vars) as well as root-relative paths though, I didn't explain the why; just the how. Point being is that you should consider reading Brandon's answer before you read mine :-)  
> **username_0**: Thanks so much guys! I knew I was letting the paths get away from me somehow. Brandon did clear this up by his education. Again, thanks!  

---

### Answer by username_1 on 2014-10-22. Score: 1

I would suggest using the [includeCssFile Tag](http://buildwithcraft.com/docs/templating/includecssfile) for your CSS files (there is another for [js files](http://buildwithcraft.com/docs/templating/includejsfile) for what ever it's worth)

So for example in your case you'd have:

`{% includeCssFile "/assets/css/nav.css" %}`

Note: I think that is correct though you might need to play with the path a bit. Specifically the first slash.

For the img tags you can probably get way with this:

`![](/assets/images/swf_logo.png)`

or if you want you could add the [siteUrl Global Variable](http://buildwithcraft.com/docs/templating/global-variables#siteUrl) to the mix as well

`![]({{ siteUrl }}assets/images/swf_logo.png)`

Note: again you might need to play with the starting slash depending on your config setup and siteUrl ending with a slash or not:

`{{ siteUrl }}/assets/images/swf_logo.png`


---

