rocknbil - 6:00 pm on Nov 21, 2011 (gmt 0)
1. You don't need quotes either, although I have no example handy, they've caused some havok on some sites that was fixed by just removing them.
Also what happens if your background doesn't tile well, or incorrectly, or the viewport exceeds it's width? You need two control the position and repeat properties as well. Two examples:
background:url(/App_Themes/Peacock/img/MainBackground.png) top left no-repeat;
/* or for horizontal repeat:*/
/* background:url(/App_Themes/Peacock/img/MainBackground.png) top left repeat-x; */
Downside: see below . . .
2. Here is why the root-relative URL gets important:
about-us/our-team/index.html (even though you wouldn't need to specify index.html)
So from index.html, references in dot-toothpick syndrome syntax would be
From the css directory it would be
from the our-team/index.html it would be
After a while it becomes tiresome, annoying, and error prone to keep track of all your dots and leaning toothpicks. For all of the above, you could just do
The leading slash always starts at root. This way it's one less error to worry about, you can focus on other errors.
Another important aspect, if your site is dynamic and you use mod_rewrite, you may not actually be in the directory you expect. Given a typical example, but exaggerated for demonstration,
Let's say you have a rewrite rule to manage friendly URL's,
ReWriteRule (.*) /blog/index.php?q=$1 [L,QSA]
So if you request "/about/our-team" it will direct to /blog/index.php, but your page output will still "think" it's at /about/our-team. So references to ../css/my.css won't work . . .but /css/my.css will.
The downside: Since your local computer is not a web server (unless you install local software to make it so,) it doesn't have a "domain root" so the leading slash won't work.
You'll have to make a local copy and mod it before uploading. Generally this isn't a problem, I use a search-and-replace function that nukes all the toothpicks prior to upload and replaces them with a single leading /.